CSS——important和盒模型
来源:互联网 发布:js倒计时器 天时分秒 编辑:程序博客网 时间:2024/06/07 23:21
important标记
<style type="text/css"> p{ color:red; } #para1{ color:blue; } .spec{ color:green !important; } </style></head><body> <p id="para1" class="spec">我就想是绿色</p></body>
这时候是绿色,但是如果CSS中的p标签变成:
p{ color:red !important; font-size:100px; }
则结果便是红色。
因为通过k:v!important;来给一个属性提高权重,这个属性的权重就是无穷大。
注意语法
正确的:font-size:60px !important;
错误的:
font-size:60px; !important;
font-size:60px important;
需要注意的是:
1.important提升的是一个属性,而不是一个选择器:
<style type="text/css"> p{ color:red !important; font-size:100px; } #para1{ color:blue; font-size:50px; } .spec{ color:green; font-size:20px; } </style>
只针对颜色写了important,所以就字体颜色属性提升权重;字号属性没有写,所以就没有提升权重。综合来看,字体颜色是red(听important的),字号是50px(听id的)。
2.important无法提升继承的权重,该是0还是0:
比如html结构:
<div> <p>哈哈哈哈哈哈</p></div>
其CSS样式:
div{ color:red !important; } p{ color:blue; }
最后字体还是蓝色。
因为div是通过继承性来影响文字颜色的,所以!important无法提升它的权重,权重依然是0。p标签是选中了,所以字是蓝色的,要以p为准。
3.!important不影响就近原则:
<style type="text/css"> div{ color:red !important; } ul{ color:green; } </style></head><body> <div> <ul> <li>猜猜我是什么颜色</li> </ul> </div></body>
div选择器没有直接用于最内层标签,没有直接选择上文字所在标签,所以是通过继承性来影响文字颜色,所以权重为0。important无法提升权重是0的选择器,此时没有打破就近原则。由于ul比div近,所以以ul为准。
一般情况下不使用important,因为会让CSS很乱。
权重计算的总结:
1. 被选中了→比权重→权重不同的话谁大就听谁的,权重相同的话哪个编辑器写在后面就听那个的。
2. 没被选中→就近原则:谁描述的近听谁的→如果一样近,比权重→如果权重不同,谁的权重大就听谁的,如果权重相同,谁写在后面就听谁的。
盒模型
width:内容的宽度,不是盒子的宽度
height:内容的高度,不是盒子的高度
padding:内边距
border:边框
margin:外边距
<style type="text/css"> div{ width: 200px; height: 200px; border:1px solid red; padding: 50px; } </style>
这个盒子width:200px; height:200px; 但真实占有的宽高是302*302,因为还有padding、border。宽度和真实占有的宽度不是一个概念。
下面两个盒子的真实占有宽高完全相同,都是302*302:
.box1{ width:100px; height:100px; padding:100px; border:1px solid red; } .box2{ width:250px; height:250px; padding:25px; border:1px solid red; }
如果想保持一个盒子的真实占有宽度不变,那么加width就要减padding,加padding就要减width。
padding就是内边距,padding的区域有背景颜色,CSS2.1前提下,并且背景颜色一定和内容区域的相同,也就是说,background-color将填充所有border以内的区域。
有四个方向,padding-top,padding-right,padding-bottom,padding-left。
如果不写padding-left,那就是没有左内边距。
快捷键是pdt、pdr、pdb、pdl然后按tab。
综合属性:
如果写了四个值,则padding: 30px 20px 40px 100px; 即上、右、下、左。
如果只写了3个值,则padding: 20px 30px 40px; 即上、右、下。没有左,说明左和右是一样的。
如果只写了2个值,则padding: 30px 40px;即上、右。没有下,说明和上一样;没有左,说明和右一样。等价于padding: 30px 40px 30px 40px。
div{ padding: 20px; padding-left: 30px; }
以上是小属性层叠大属性,也就等价于padding: 20px 20px 20px 30px。
但是不能把小属性写在大属性前面(如下):
div{ padding-left: 30px; padding: 20px; }
题目1,说出下面盒子真实占有宽高:
div{ width: 200px; height: 200px; padding: 10px 20px 30px; padding-right: 40px; border: 1px solid #000; }
真实占有宽度=200+20+40+1+1
题目2,说出下面盒子真实占有宽高:
div{ width: 200px; height: 200px; padding-left: 10px; padding-right: 20px; padding: 40px 50px 60px; padding-bottom: 30px; border: 1px solid #000; }
padding-left: 10px; 和padding-right: 20px; 没用,因为后面的padding大属性会层叠掉他们。
一些元素默认带有padding,比如ul标签。
在做网站的时候,为了便于控制,总是喜欢清除默认padding:
*{ margin: 0; padding: 0; }
*的效率不高,所以我们使用并集选择器,罗列所有标签:
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}
border
边框。三个要素:粗细、线型、颜色。
颜色如果不写,默认是黑色。如果另外两个属性不写,则显示不出来边框。
所有线型:
a dotted border /a dashed border /a solid border /a double border /a groove border /a ridge border /an inset border /an outset border
比如border: 10px ridge red; 在chrome和firefox、IE中会有细微差别。
border是一个大综合属性,
border: 1px solid red; 就是把4个边框都设置为1px宽度、线型实线、red颜色。
border属性能够被拆开,有两种方式:
1)按3要素: border-width、border-style、border-color
border-width: 10px; →边框宽度
border-style: solid; →线型
border-color: red; →颜色
等价于border: 10px solid red;
如果某一个小要素后面是空格隔开的多个值,那么就是上右下左的顺序:
border-width: 10px 20px;border-style: solid dashed dotted;border-color: red green blue yellow;
2)按方向: border-top、border-right、border-bottom、border-left
border-top: 10px solid red;border-right: 10px solid red;border-bottom: 10px solid red;border-left: 10px solid red;
等价于border: 10px solid red;
border: 10px solid red;border-right-color: blue;
border: 10px solid red;border-style: solid dashed;
可以没有border→border: none;
某一条边没有→border-left: none;
也可以调整左边边框的宽度为0→border-left-width: 0;
用border制作一个三角形:
div{ width: 0px; height: 0px; border: 30px solid white; border-bottom: none; border-top-color: blue; }
- CSS——important和盒模型
- CSS——!important
- CSS——!important的使用场景
- CSS学习—盒模型和布局模型
- CSS兼容性解决方法(盒模型)- !important的IE7,Firefox问题
- css important
- CSS !important
- CSS:!important
- 如何和何时使用CSS的!important
- 如何和何时使用CSS的!important
- CSS——盒模型
- CSS盒模型和流动模型
- css的盒模型和布局模型
- CSS元素和盒模型
- css盒模型和定位
- CSS—盒子模型
- CSS—框模型
- div+css使用!important标记区别Firefox和IE6
- Flume+Kafka环境构建和实战
- 关于AFUrlSessionManager下载文件报The file couldn’t be opened because the specified URL type isn’t support问题
- Android 性能优化:使用 Lint 优化代码、去除多余资源
- 实训第八天
- maven 阿里下载源 setting.xml
- CSS——important和盒模型
- JavaScript基础之浏览器对象
- 获取url里面的参数,并转化为json
- 解释型语言与编译型语言有什么不同
- 题目236:心急的C小加
- 结构体字节对齐
- 几张趣图助你理解HTTP状态码~
- 虚拟币交易平台源码 带手机版+APP 山寨币交易平台包安装包对接区块链ICO众筹源码
- unity shader:初探光照