css
3种样式写法
link/import(页面标签全部加载完，ie老版本不支持),style,行内
样式优先级
| 选择器 | 权重 |
|---|---|
| 标签（div） | 1 |
| 类选择器(class) | 10 |
| id选择器 | 100 |
| 包含选择器 | 包含选择符的权重之和 |
| 内联样式 | 1000 |
| !important | 10000 |
| 解析原则 1 | 多种选择器 对一个标签作用时，已权重高的为准 |
| 解析原则2 | 相同权重(2个class作用与一个div)，遵循就近原则，代码自上而下，以最后执行的为准 |
- 就近原则
!important语法
是针对{}里面所有属性，如下情况，相同属性都“重要”时，就近原则，但行内样式没有的，内部样式和外部样式再看谁有“重要”标记。
点击查看代码
<stryle>
div{
width:50px,!important;,
color:blue;
}
</stryle>
<body>
<div style="width:1234px!important;">
demo
</div>
</body>
文本属性
- 字体大小： font-size:16px; 浏览器默认大小。
- 颜色： color
- 水平对齐: text-align:center|right|left|justify(把一行填满再换行)
- 垂直居中
- 行高：line-height:100px;针对单行文本的字体大小。
- 字符间距：letter-spacing:10px;
- 单词间距：word-spacing:20px;
- 首行文本空2个字符：text-indent:2em;
- 例子：div里面的元素（文本，按钮）水平垂直居中
行高和div保持一样！
点击查看代码
<div style="text-align: center;line-height:100px;">
<button >保存</button>
</div>
背景属性
| 属性名 | 描述 | 用法 |
|---|---|---|
| background-color | 背景色 | background-color：red |
| background-image | 背景图 | background-image:url(); |
| background-repeat | 背景图重复平铺 | background-repeat:no-repeat/repeat-x/repeat-y; |
| background-position | 背景图定位 | background-position: 水平 /垂直 /负值 |
| background-attachment | 图片的固定 | background-attachment:scoll/fixed(固定) |
| 可以简写为：background |
|---|
定位 position
- static 默认值
- relative 像素大小，相对原来应该在的位置，原来该占的位置还是空着，其它元素的位置不受影响；
- fixed 父级元素为浏览器窗口，跳出三界
- absolute 相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:
_ 定位使元素的位置与文档流无关，因此不占据空间。
_ 定位的元素和其他元素重叠。
- sticky
div浮动
- float: left | right
- 取消浮动-1 clear:both; 取消左右浮动（针对不想浮动的div使用的）
- 取消浮动-2 overflow: hidden;
点击查看代码
<div style="overflow: hidden;">
<div class="div-ui" style=" float: left;background:rgb(104, 104, 142)">
左边
</div>
<div class="div-ui" style=" float: right;background:rgb(249, 208, 236)">
油
</div>
</div>
<div style="width:100%;height:100px;background:rgb(183, 207, 163);">
绿灰
</div>
效果图：
盒子模型
宽高的计算
- 要加上元素自身(div)+内边距（padding）+边框(border)+外边距(margin)
padding 内边距
- 针对div里面的内容与边框的间距
1个值：4个方向
2个值：上下，左右
3个值：上，左右，下
4个值：顺时针 - 单独控制：padding-top,left,right;
margin 外边距
- 加在标签后，自身先对于同级旁边元素。
- 子div之间的间距。
- 填写1~4个值，和内边距相同。
注意点
- 兄弟元素间，相邻间距取最大值，不会作相加。
- 父子元素间，子div想间隔父div50px:
1：父元素设置内边距，padding
2:给父元素设置边框
3：加浮动
4：overflow:hidden
边框
- border:5px dashed red; 5px虚线红色
线的样式：solid double dashed dotted
浙公网安备 33010602011771号