css小结5

jackyrong

浏览: 7952135 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

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小结6 | CSS小结4 之文本特效等

2017-04-08 10:15
浏览 643
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css小结5

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css小结5

评论

发表评论

相关推荐

微信开发工具中时间问题的小坑

三篇不错的介绍CSS GRID的文章

双因素认证（2FA）教程

es6 中的export

markdown中的空格

(转）讲真，别再使用JWT了

(转）手把手教你WebStorm+chrome实现时时调试刷新

IntelliJ Idea 2017 免费激活方法

前端框架这么多，该何去何从？

记录一个HTML 5画拓扑图的商业公司

vue 2例子学习收集

（收藏）虚拟DOM内部是如何工作的

最近看到的几篇精彩JAVASCRIPT博客文章推荐

jsonp 跨域原理：深入浅出 jsonp

(转）深度长文-JavaScript数组所有API全解密

(收藏）网页导出PDF的方案

Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

国内一个不错的大屏UI设计厂家

canvas仿芝麻信用分仪表盘

(转）CSS 变量教程

最近访客更多访客>>