`

css小结5

 
阅读更多
CSS小结5


1 textare中，可以设置固定大小，设置max-width,max-hetigh，这样，用户在CHROME下的小三角形拖动的时候不变形；
<style type="text/css">
        textarea
        {
            width:100px;
            height:80px;
            max-width:200px;
            max-height:160px;
        }
    </style>
</head>
<body>
    <textarea></textarea>
  也可以禁止拖动，设置<style type="text/css">
        textarea
        {
            width:100px;
            height:80px;
            resize:none;
        }
    </style>

 
2 在chrome,firefox,ie 下实现相同的外观
   默认情况下， textare中IE有滚动条，而CHROME是没滚动条的，
    textarea
        {
            width:100px;
            height:80px;
            overflow:auto;
            resize:none;
}
   使用  overflow:auto就可以了；

3 浮动
   1） 当一个元素定义了float:left，或者float:right的时候，不管这个元素之前是inline，inline-block或者其他
类型，都变成block类型。
   <style type="text/css">
        span
        {
            float:left;
            width:50px;
            height:80px;
            border:1px solid gray;
            margin-left:10px;
        }
    </style>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>

  这里span拥有了宽度高度
2） 当一个元素定义了float:left,float:right，这个元素脱离文档流，后面的元素位置跟上空缺的位置。

3） 如果一个元素设置为浮动，则不管这个元素什么类型，都转为块元素，DISPKLAY属性设置为BLOCK；
  
    <style type="text/css">
        strong
        {
            float:left;
            width:120px;
            height:60px;
            line-height:60px;
            border:1px solid gray;
            text-align:center;
        }
    </style>
</head>
<body>
    <strong>ABC</strong>


   则STRING变为块元素，可以设置WIDTH,HEIGHT,PADDING等；
4）对父元素影响：如果浮动元素的高度大于父元素高度，或者父元素高度无定义，则浮动元素会脱离父元素；
   <style type="text/css">
        #wrapper
        {
            width:200px;
            border: 1px solid black;
        }
        #first,#second
        {
            width:80px;
            height:40px;
            border:1px solid red;
        }
        #first{float:left;}
        #second{float:right;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="first"></div>
        <div id="second"></div>
    </div>

5） 对兄弟元素影响：
    A 当一个浮动元素，它的兄弟也是浮动的时候，
    同一方向的兄弟元素，这些元素会从左到右，从上到下，一个接1个排列；
     <style type="text/css">
        #wrapper
        {
            width:240px;
            height:20px;
            border:1px solid black;
        }
        #first, #second
        {
            width:60px;
            height:60px;
            border:1px solid gray;
            margin-top:10px;
            margin-left:10px;
            margin-right:10px;
            background-color: #F4F6F4;
        }
        #first{float:left;}
        #second{float:right;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="first">1</div>
        <div id="second">2</div>
    </div>

   相反方向的兄弟元素，这两个元素会移向两边（如果父元素宽度足够）
   <style type="text/css">
        #wrapper
        {
            width:240px;
            height:20px;
            border:1px solid black;
        }
        #first, #second
        {
            width:60px;
            height:60px;
            border:1px solid gray;
            margin-top:10px;
            margin-left:10px;
            margin-right:10px;
            background-color: #F4F6F4;
        }
        #first{float:left;}
        #second{float:right;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="first">1</div>
        <div id="second">2</div>
    </div>

   如果一个元素是浮动元素（没定义高度），则它的子元素也是浮动元素，则这个浮动元素会自适应包含该子元素
   <style type="text/css">
        #wrapper
        {
            width:200px;
            border: 1px solid black;
        }
        #first,#second
        {
            width:80px;
            height:40px;
            border:1px solid red;
        }
        #first{float:left;}
        #second{float:right;}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="first"></div>
        <div id="second"></div>
    </div>

6） 清除浮动
    在CSS中常见清除浮动的方法
    A clear:both
    B overflow:hidden
    C ::after伪元素
  
A clear:both
   不是应用于浮动元素本身，而是应用于浮动元素后面的元素
  
   <style type="text/css">
        #wrapper
        {
            width:200px;
            border: 1px solid black;
        }
        #first,#second
        {
            width:80px;
            height:40px;
            border:1px solid red;
        }
        #first{float:left;}
        #second{float:right;}
        .clear
        {
            clear:both;     /*关键代码，清除浮动*/
        }
    </style>
</head>
<body>
<div id="main">
    <div id="wrapper">
        <div id="first"></div>
        <div id="second"></div>
        <div class="clear"></div>
    </div>

B overflow:hidden
   这个是应用于浮动元素的父元素，而不是当前的浮动元素：
  
  <style type="text/css">
        #wrapper
        {
            overflow:hidden;       /*关键代码，清除浮动*/
            width:200px;
            border:1px solid black;
        }
        #first,#second
        {
            width:80px;
            height:40px;
            border:1px solid red;
        }
        #first{float:left;}
        #second{float:right;}
    </style>
</head>
<body>
<div id="main">
    <div id="wrapper">
        <div id="first"></div>
        <div id="second"></div>
    </div>
</div>

分享到：
| CSS小结4 之文本特效等
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML+CSS总结.doc

    "HTML+CSS总结" HTML（HyperText Mark-up Language）是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、...

    CSS学习总结思维导图.xmind

    css学习总结思维导图

    CSS常用样式总结积累

    这篇博客"CSS常用样式总结积累"是博主对CSS的一些核心概念和技术进行的归纳，旨在帮助读者理解和掌握CSS的基本用法。以下是对这些知识点的详细解释： 1. **选择器**: CSS选择器是匹配HTML元素的方式，如类选择器（`...

    CSS制作网页总结经验

    CSS制作网页总结经验,CSS制作网页总结经验,CSS制作网页总结经验

    上课用CSS实验总结

    在本“上课用CSS实验总结”中，我们将深入探讨CSS（层叠样式表）的核心概念以及在实际项目中的应用。CSS是网页设计的关键技术之一，它负责定义网页内容的外观和布局，使得网页更具视觉吸引力并提高用户体验。在这个...

    CSS实战学习总结,很不错的

    ### CSS实战学习总结 在《CSS实战学习总结》这一篇深度文档中，作者辛磊针对CSS的实际应用进行了全面而深入的解析，旨在帮助读者掌握CSS的核心技能，提升网页设计与开发的能力。以下是对该文档中关键知识点的提炼与...

    关于图片显示问题的CSS总结

    本文将基于“关于图片显示问题的CSS总结”这一主题，深入探讨CSS在处理图片显示时的关键知识点，以帮助开发者更好地理解和解决图片相关的问题。 首先，我们来看CSS中的`background-image`属性，它用于设置元素的...

    html和css总结文档

    ### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则，掌握布局技巧，以及了解响应式设计和预处理器的使用，将有助于创建出专业且用户友好的网页。通过不断实践和探索，可以逐步深化对这两...

    CSS小结有关整体

    这是一篇关于前端页面的介绍，开放学习，望大家多多看看、 哈哈

    前端开源库-postcss-css-variables

    总结来说，Postcss-css-variables插件是前端开发者处理CSS Variables的有效工具，它增强了CSS Variables的浏览器兼容性，简化了样式管理，提高了代码的可维护性和效率。结合PostCSS的其他插件，可以构建出强大的CSS...

    CSS基础入门总结（很详细的哟）

    一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、...

    css属性大全总结

    整理了常用的css属性，适用于新手查阅，熟悉css基本属性使用等等

    dw cs6的css总结

    dw cs6的css总结

    html+css知识点总结

    html+css知识点总结

    pycharm中显示CSS提示的知识点总结

    下面小编给大家分享一下。 首先点击左上角的file菜单，选择Setting 接着选择Editor下面的Inspections选项，如下图所示 然后在右侧找到CSS，选择typo，如下图所示 接着点击apply和ok按钮，如下图所示 然后新建一...

    css框架Blueprint CSS

    总结起来，Blueprint CSS 是一个强大且实用的CSS框架，能够帮助开发者快速构建响应式的、视觉统一的网页。其网格系统、预定义样式和打印优化等功能，大大提高了开发效率，同时也降低了维护成本。对于任何希望提升...

    CSS学习总结

    ### CSS学习总结 #### 一、CSS选择器与样式应用 **1. 行内样式** 行内样式是在HTML元素内部直接使用`style`属性来指定样式规则的方式。这种方式适用于临时性的样式修改，但不利于代码的维护和复用。 **示例**： ...

    css 常用公共样式 样式总结（持续更新）

    本文将深入探讨“css常用公共样式”的总结，包括`flex布局`、`简写`技巧、`遮罩层`实现以及`滚动条透明`与`动画`的应用。这些都是现代Web开发不可或缺的部分。 首先，让我们来谈谈`flex布局`。Flex布局，全称为 ...

    css+圆角总结

    本篇文章将深入探讨如何利用CSS实现无图片的圆角效果，以及在各种场景下创建圆角区块容器和圆形边框的方法。 一、CSS圆角基础 CSS3引入了`border-radius`属性，它允许我们为元素的四个角设定不同的圆角半径，从而...

Magicbox
Global site tag (gtag.js) - Google Analytics