【1】内联样式
【2】内部样式
【3】外部样式
有多个html页面需要用到该样式,可以在css文件夹下新建css文件mystyle.css
在html文件中通过link导入css
【4】实际开发中常用第三种方式,这种方式真正做到了元素页面和样式分离
【5】三种方式的优先级:就近原则
【4】优先级别:id选择器>class选择器>元素选择器
代码:
效果:
给绿色和橙色div加上浮动的效果:float: left
给黄色div设置浮动效果:
现在在大的div下面添加一个div
用浮动要考虑影响,看看是否对其他元素造成影响
消除浮动影响:
【1】静态定位static:一般静态定位可以不写static
【2】相对定位relative:优先级:左上>右下
应用场合:
z-index的使用:相对于屏幕的方向是z轴,可以控制那个在上层、下层
【3】绝对定位absolute:
为了使蓝色的方块在粉色块内移动,在outer可以设置一个相对定位
这个绝对定位会先向上一层一层找父节点是否有定位,找到body也没有定位的话,会相对body进行绝对定位
如果父级点有相对定位、绝对定位、固定定位,但是一般会配合父级为相对定位,当前元素为绝对定位,这样当前元素会围绕父级元素位置进行变化。且都会释放原来的位置,其他元素会占用原来的位置。
开发中:父级结点使用relative,子级结点使用absolute
【4】固定定位fixed:
右侧的导航栏
应用场合:在页面过长的时候,将某个元素固定在浏览器的位置上,当拉动滚动条的时候,这个元素的位置不动
理解蓝色区域为一个盒子
案例:12306