Java学习笔记 第十三章 CSS

JAVA学习笔记第十三章

13.CSS

13.1CSS书写方式

【1】内联样式

【2】内部样式

【3】外部样式

有多个html页面需要用到该样式，可以在css文件夹下新建css文件mystyle.css

在html文件中通过link导入css

【4】实际开发中常用第三种方式，这种方式真正做到了元素页面和样式分离

【5】三种方式的优先级：就近原则

13.2选择器和样式

13.2.1基本选择器

【4】优先级别：id选择器>class选择器>元素选择器

13.2.2关系选择器

13.2.3属性选择器

13.2.4伪类选择器

13.2.5模拟百度首页

13.2.6浮动

代码：

效果：

给绿色和橙色div加上浮动的效果：float: left

给黄色div设置浮动效果：

现在在大的div下面添加一个div

用浮动要考虑影响，看看是否对其他元素造成影响

消除浮动影响：

• 方式一：添加overflow: hidden

• 方式二：添加高度

• 方式三：对需要消除浮动影响的div加上clear: both

13.2.7定位

【1】静态定位static：一般静态定位可以不写static

【2】相对定位relative：优先级：左上>右下

应用场合：

• 元素在小范围移动的时候
• 结合绝对定位使用

z-index的使用：相对于屏幕的方向是z轴，可以控制那个在上层、下层

【3】绝对定位absolute：

为了使蓝色的方块在粉色块内移动，在outer可以设置一个相对定位

这个绝对定位会先向上一层一层找父节点是否有定位，找到body也没有定位的话，会相对body进行绝对定位

如果父级点有相对定位、绝对定位、固定定位，但是一般会配合父级为相对定位，当前元素为绝对定位，这样当前元素会围绕父级元素位置进行变化。且都会释放原来的位置，其他元素会占用原来的位置。

开发中：父级结点使用relative，子级结点使用absolute

【4】固定定位fixed：

右侧的导航栏

应用场合：在页面过长的时候，将某个元素固定在浏览器的位置上，当拉动滚动条的时候，这个元素的位置不动

13.3盒子模型

理解蓝色区域为一个盒子

案例：12306