05-CSS 权重 盒模型 标准文档流 浮动
来源:互联网 发布:数字电视机顶盒软件 编辑:程序博客网 时间:2024/05/17 20:09
一、权重问题
1.1、 !important 标记
可以通过 k : v !important 来给一个属性提高权重,这个属性的权重是无穷大的。
<style> .spac2{ color: red; } .spac1{ color: blue; } </style></head><body> <p class="spac1 spac2">我是什么颜色?</p> <p class="spac2 spac1">我是什么颜色?</p></body>只看 CSS 谁在前谁在后决定颜色,与两个class 的书写顺序没有关系。
<style> .spac2{ color: red !important; } .spac1{ color: blue; } </style></head><body> <p class="spac1 spac2">我是什么颜色?</p> <p class="spac2 spac1">我是什么颜色?</p></body>通过 !important 提高权重的效果如上图。注意要有 !,并且写在分号内部。
!important 注意点:
1、!important 提升的是一个属性,而不是一个选择器。
<style> p{ /*!important 提高的是一个属性的权重,不是一个选择器的权重*/ /*最终的效果是字号还是 20px 而颜色是 green*/ color: green !important; font-size: 10px; } .spac2{ color: red; font-size: 30px; } #para1{ color: blue; font-size: 20px; } </style></head><body> <p id="para1" class="spac2">我是什么颜色?</p></body>
2、!important 无法提升继承的权重,该是0 还是 0。
<style> div{ /*!important 在这里并不能改变权重(无法提升继承的权重),没有p标签是直接选中的而不是继承*/ color: red !important; } p{ color: greenyellow; } </style> <div> <p>!important 无法提升继承的权重,该是0还是0</p> </div>
3、!important 不影响就近原则。
一般情况下,开发中!important 是不使用的,因为会让Css写的很乱。
1.2 、权重计算总结
二、盒模型
2.1、 盒子的区域
一个盒子的主要属性有5个:width、height、padding、border、margin
width:宽度 ,指的是内容宽度,而不是盒子的宽度。
height:高度,指的是内容的高度,而不是盒子的高度。
padding: 内边距
border: 边框
margin : 外边距
2.2 、width 、height、padding
关于 width 和 height 和平时说的不是一个概念,在CSS中宽高指的是内容的宽高。
真实的占有宽度 = left-border + left-padding + width + right-padding + right-border
padding 就是内边距,并且padding 区域是有颜色的,颜色一定和内容区域相同。也就是说background-color 将填充左右的boder 以为的区域。
padding 是 4 个方向的,所以能够分别描述 4 个方向的padding。
方法有两种,第一种写小属性;第二种写综合属性,空格隔开。
小属性的写法:
padding-top: 50px; padding-right: 50px; padding-bottom: 5px; padding-left: 50px;综合属性(上、右、下、左):
padding:50px 20px 10px 50px;如果只写三个值:(上、右、下 、?和右相等)
padding:50px 20px 10px;
如果只写两个:(padding:50px 20px 等价与如下:)
padding-top: 50px; padding-right: 20px; padding-bottom: 50px; padding-left: 20px;还可以用小属性重叠大属性:(但是不能大属性去重叠小属性,也就是说必须要大属性写在前面)
padding:50px; /*那么对应的 padding-left 由 50px 改为 20px*/ padding-left: 20px;有一些元素默认就带有padding ,比如 ul 标签:
开发中,为了便于控制,总是喜欢清除默认的padding
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0; padding:0; }
2.3 、border
border 就是边框。边框有三个要素:粗细、线型、颜色。
颜色不写默认是黑色。粗细、线型不写显示不出来边框。
border属性能够被拆开,有两大种拆开的方式:
1、 按3要素:border-width(线框宽度)、border-style(线型)、border-color(颜色)
2、 按方向:border-top、border-right、border-bottom、border-left
border-width:10px 20px; border-style:solid dashed dotted; border-color:red green blue yellow;
如果一个小要素后面是空格隔开多个值,那么就是上右下左的顺序。
border 可以为none ,那么就是某一条边没有,也可以调整某条边边框的宽度为0。三、标准文档流(web 页面是个“流”,必须从上往下)
标准文档流的微观现象:
1、空白折行现象(比如让多个 img 标签之间没有空隙,必须紧密相连 )
2、高矮不齐,底边对齐
3、自动换行,一行写不满换行写。
3.1、 块级元素和行内元素
<style> p{ width: 200px; height: 40px; background-color: green; } span{ width: 200px; height: 40px; background-color: red; } </style></head><body> <p>呵呵呵呵</p> <p>哈哈哈哈</p> <span>呵呵呵呵</span> <span>哈哈哈哈</span></body>
块级元素:
- 霸占一行,不能和其他元素并列。
- 能接受宽、高。
- 如果不设置宽高,那么宽高默认是父亲的100%。
行内元素:
- 与其他行内元素并排。
- 不能设置宽、高。默认的宽度,就是文字的宽度。
HTML中把标签分为两类,文本级、容器级
文本级别:p、span 、a、b、i、u、em
容器级标签:div 、h系列、 li、 dt、 dd
CSS 的分类和 HTML 分类很像,就 p 不一样:
所有的文本级标签都是行内元素,除了 p ,p 是一个文本级,但是是个块级元素。
所有的容器级标签都是块级元素。
3.2、 块级元素和行内元素的相互转换
块级元素可以设置为行内元素。(display:inline)
行内元素可以设置为块级元素。 (display:block)
<style> p{ display: inline; //块级元素可以通过 inline 设置为行内元素 width: 200px; height: 40px; background-color: green; } span{ display: block; //行内元素可以通过 block 设置为块级元素 width: 200px; height: 40px; background-color: red; } </style></head><body> <p>呵呵呵呵</p> <p>哈哈哈哈</p> <span>呵呵呵呵</span> <span>哈哈哈哈</span></body>
标准文档流的限制非常多,标签的性质很恶心,比如要设置并排、并且还要设置宽高。那么就要脱离文档流:
CSS 中一共有三种手段,让一个元素脱离标准文档流:
1、浮动
2、绝对定位
3、固定定位
四、浮动
浮动是CSS里面布局用的最多的属性。
<style> .box1{ float: left; width: 80px; height: 50px; background-color: yellowgreen; } .box2{ float: left; width: 100px; height: 70px; background-color: skyblue; } </style></head><body> <div class="box1"></div> <div class="box2"></div></body>两个元素并排了,并且两个元素能够设置宽高了,这就是浮动。
4.1 、浮动的元素脱标
如果把上面box2 的 float:left 去掉就会变成下面的效果:
绿色盒子float:left ,蓝色盒子没有float,绿色的盒子脱离了标准文档流,所以蓝色的盒子就是现在的标准文档流中的第一个盒子,所以就渲染在了页面的饿左上方。
<style> span{ float: left; width: 100px; height: 30px; background-color: gold; } </style></head><body> <span>哈哈哈哈</span> <span>呵呵呵呵</span> <span>哎呀哎呀</span> <span>好吧好吧</span></body>未添加 float:left
添加了float:left 后
综上说明:一个span 标签不需要转换成块级元素,就能设置宽度、高度;这就是说标签已经不区分行内、块了。也即是说,一旦一个元素浮动了,那么就能够并排了,能够设置宽高了。无论原来是div 还是 span
4.2、 浮动的元素相互贴靠
<style> .box1{ float: left; width: 80px; height: 200px; background-color: green; } .box2{ float: left; width: 50px; height: 60px; background-color: yellowgreen; } .box3{ float: left; width: 80px; height: 100px; background-color: aquamarine; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body>
4.3、浮动的元素有“字围”效果
<style> .box1{ float: left; width: 80px; height: 60px; background-color: green; } </style></head><body> <div class="box1"></div> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p></body>
关于浮动,要遵循一个原则:永远不是一个东西在浮动,浮动是一起浮动,要浮动大家一起浮动。
- 05-CSS 权重 盒模型 标准文档流 浮动
- [CSS]CSS浮动float详解(一):标准文档流
- CSS——标准文档流和浮动
- CSS核心内容-标准流、盒子模型、浮动、定位
- CSS核心内容-标准流、盒子模型、浮动、定位
- 标准文档流和浮动
- CSS 标准流 浮动 清除浮动
- 读书笔记--精通CSS高级Web标准解决方案(三)---CSS盒模型、浮动与定位
- CSS标准文档流
- css : 标准文档流
- 03 CSS-盒模型和标准文档流(行内元素和块级元素)
- 03 CSS-盒模型和标准文档流(行内元素和块级元素)
- CSS学习笔记7:如何脱离标准文档流之浮动
- CSS:标准文档流、浮动、绝对定位—(解决有时候父元素不能自动扩展)
- CSS 选择器 样式 浮动 盒子模型 块元素 内联元素 内联块元素 定位 权重
- CSS浮动框是否脱离文档流?
- CSS浮动与盒模型知识点
- CSS基础(二)--盒模型与浮动
- VMware Workstation虚拟机打开 .vmx 文件没有反应--解决办法
- 创建Android快捷方式牛刀小试
- Kafka初涉
- JavaScript 数据类型转换(2017-1-3)
- halcon与opencv图片的数据结构转换
- 05-CSS 权重 盒模型 标准文档流 浮动
- 06-CSS 浮动的清除 margin Fireworks和精确盒子还原
- Gradle之依赖管理
- 数据库在windows下的坑
- PHP会话应用之COOKIE应用(一)
- MySQL子查询和联结表笔记
- 电脑播放SACD-ISO/DSD/DFF音乐
- 原生JS写Ajax的请求函数
- Sublime Text2篇之注册及Pakage Control的安装