AI智能
改变未来

样式的基本知识(命名规范、优先级、改变位置元素)

样式的一些基本知识

#样式的一些基本知识**

**class:命名规范:**必须是英文,不能有大写字母,不能用纯数字,不能以数字打头,不能有特殊符号(除了-_),不能用关键字,要见名知义
**id:**命名规范同class

区分内联、内部、外部样式
1.内联/行内样式 :写在元素开始标签之中的
2.内部样式:写在style标签里面的
3.外部样式:通过link标签引入的。路径可以是相对路径也可以是绝对路径
给元素起名字

样式的优先级:
!important>内联样式>内部样式(id>class>标签名)
!important>内联样式>外部样式(id>class>标签名)
!important>内部样式=外部样式
同级之间(后>前)

改变元素位置的方法:
常用:margin、padding、position。
补充:margin:100px 代表四个方位的间距都是100px
margin:100px 200px 代表上下间距为100px,左右间距为200px,
margin:50px 100px 150px 200px 依次代表上右下左(顺时针方向)
padding同理
1.margin(外边距) top bottom left right
问题:margin塌陷:子父级之间,给子集加margin-top,不生效,并且和父级一起塌陷你所给 的数值。
margin合并:同级之间,垂直方向上,临边的margin会合并为1个,(较大的那个)
2.padding(内边距)
问题: 会自动的增长或者增宽
解决:只要你使用了padding,就一定要减去对应的宽和高
3.position(定位)
absolute(绝对定位):想改变谁的位置,就给谁加绝对定位。(只能参照已定位的父级)
relative(相对定位):想以谁当作参照,就给谁加相对定位。默认不会改变自己的位置
fixed(固定定位):参照浏览器定位
问题:
1.绝对和固定定位的元素不占位置的
2.绝对和固定定位的元素会脱离文档流

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 样式的基本知识(命名规范、优先级、改变位置元素)