CSS的常用属性(二)
2018-06-24 02:14:23来源:未知 阅读 ()
盒子模型之边框
border-(top/bottom/left/right)-style: solid 边框的风格 如(solid 实线,dotted 点线,dashed 虚线)
border-top-color: #aaa 边框颜色
border-top-width: 20px 边框粗细
边框四个方向连写: 如 border-color: #000
边框属性连写: border-top: #555 solid 5px
四个方向边框属性同写: border: 12px dashed 10px
注意: 没有顺序要求,但边框风格也就是线型不能少
补充:
边框合并: border-collapse: collapse
去掉边框: border: 0 none
去掉路轮廓线: outline-style: none
盒子模型之内边距
padding-left: 20px;
padding-right: 10px;
padding-top: 30%;
padding-bottom: 40%;
属性连写:
padding: 20px; 上下左右都为20px
padding: 10px 20px; 上下为10px,左右为20px
padding: 10px 20px 30px; 上内边距为10px,左右为20px,底为30px
padding: 10px 20px 30px 40px; 上10px,右20px,下30px,左40px
注意: 给盒子指定宽高,在里面使用padding会撑大盒子
补充: 盒子的宽度等于: 定义的宽度+边框宽度+左右内边距
盒子模型之外边距
margin(与内边距使用方法相似): margin: 20px
margin: 20px auto (auto表示自适应,个人理解就是居中)
补充: 两个盒子垂直,上面的盒子设置下边距。下面的盒子设置下边距,两个盒子的边距取设置边距大的那个
解决:嵌套的盒子外边距塌陷
当给子盒子里设置如margin-top: 10px时,父盒子相对于顶部向下移动了10px,而子盒子相对于父盒子没有移动
两种方法解决: 第一个是给父盒子设置一个边框;第二个方法是给父盒子设置: overflow: hidden;(内容溢出元素框时隐藏)
补充: 行内元素可以定义左右的内外边距,上下会被忽略;行内块可以定义内外边距
浮动布局
float: left / right
特点:
元素浮动后不占据原来的位置(脱标)
浮动的盒子在一行显示(除非边框已经无法容纳)
行内元素浮动后会转化成行内块元素
清除浮动的方法:
clear: left / both / right 用的最多的是clear: both
第一种方法: <div style="clear: both;"></div>
第二种方法: overflow: hidden
注意: 如果内容出了盒子,则不能使用这个方法
第三种方法: 伪元素清除浮动(推荐使用)
.clearfix:after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden; 规定元素不可见(但会占据页面上的空间)
clear: both;
}
兼容IE浏览器:
.clearfix{
zoom: 1;
}
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:BootStrap实例
下一篇:web前端性能优化汇总
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash