css复习笔记笔记,基础知识集锦

css复习笔记笔记,基础知识集锦

一、复习回顾
1.网页结构----html
网页布局的三大要素:盒模型、浮动、定位
(1)盒模型:内联元素、块级元素

块级元素:p/div/hn(h1~h6)/ol有序/ul/li/table/tr行/td列/th/form… header/section/article/aside/footer [html5结构化标记]

	特点:1.单独占一行
		 2.可以嵌套块级元素和内联元素
		 3.可以修改高度和宽度
		 4.margin  padding是有效的
		 5.块级元素可以设置背景图片和背景颜色
	  特例:p  (只能嵌套自己和内联元素)	 

内联元素:a/img/br/b/span/strong/em/i/input/button/textarea/select…
特点:1.只能嵌套内联元素
2.会出现在一行上
3.margin和padding在左右方向上有效
4.不能修改高度和宽度
5.不可设置背景图片
特例:img

内联元素和块级元素可以互相转换:通过display

(2)浮动:左浮动、有浮动

(3)定位:绝对定位、相对定位、固定定位

2.网页样式----css
(1)盒模型:
1)display:block(块级)/inline(内联)/inline-block(内联块)
2)四个组成部分:内容(content)、填充(padding)、边框(border)、边距(margin)
padding/border/margin取值顺序
border:5px 10px 15px 20px -上 右 下 左
5px 10px 15px -上 左右 下
5px 10px -上下 左右
5px -上下左右

(2)浮动:
float:right/left/
浮动对周围元素的影响----
1)会对后面的兄弟元素产生影响:
清楚:clear:right/left/both

2)对父元素的影响:高度塌陷
清除:方法1-- overflow:auto(自动)能自动加滚动条/scroll加滚动条/hidden多出来的内容隐藏掉(常用)
方法2–在父元素中所有子元素最后,添加一个空div或br,并给他设置clear:both
方法3–在父元素中设置一个伪元素after

(3)定位:
position:absolute/relative/fixed --绝对、相对、规定
1) 参照物–
绝对定位的参照物:祖先元素(包括他的几个都是),且是离他最近的一个定位了的祖先
相对定位的参照物:元素本身(自己)
固定定位的参照物:浏览器

--absolute

2)必须与方向属性配合使用 top: 5px;left:10px /left/bottom/right

3.网页行为----JavaScript

【4.JS三大框架之一 Vue.js】

你可能感兴趣的:(css复习笔记笔记,基础知识集锦)