css基础知识二

1、盒模型：

　　实际宽度：外边距*2+内边距*2+边框*2+内容宽度（注意这点，可解决界面元素轻微浮动问题，如hover有边框,以前没的时候会有轻微浮动）

　　作用：他规定了网页元素如何显示以及其相互关系

2、padding会撑大容器，而margin不会。

　　这点巧用（自己总结的）：① 能用margin的别用padding

　　　　　　　　　　　　　　② 网页中为一个元素添加一边的下划线时候用padding

　　　　　　　　　　　　　　③ 导航栏中，用<ul><li>写的时候，先调节<li>的padding：npx，再调节<ul>的margin，记得margin的值减去n

3、background-size ： cover：扩大图像，使得背景图完全覆盖背景区域，知道碰到最后一个边缘停止

　　　　　　　　　　　　contain:扩大背景图像，碰到第一个边缘就停止

4、背景的冷知识，设置scroll(随页面滚动而滚动)或fixed（不随页面滚动）

5、渐变：线性渐变：linear-gradient 属性值(to top,red 40%,blue 50%) 这里注意加上-webkit后不用加to了就

　　　　径向渐变：radial-gradient　属性值(center,shape size,start-color,last-color)

　　　　　　　　shape：circle或ellipse

　　　　　　　　size：自行查阅吧，用的不多。

　　　重复渐变：repeating-linear-gradient

6、浏览器兼容： Firefox：-moz-

　　　　　　　　Chrome,Safari:-webkit-

　　　　　　　　Opera:-o-

7、首行文本缩进：text-indent:2em

8、溢出处理： white-space:normal / nowrap（不换行）

　　　　　　文本溢出： text-overflow: clip(直接裁剪) ellipsis 通过...来显示

　　　　　　　　　　出现...的条件 ① white-space:nowrap ② text-overflow:ellipsis ③ width: ④ overflow:hidden

　　　　　　长单词换行(只对英文有效) word-wrap : break-word

　　　　　　文本换行 word-break:break-all 破坏单词结构进行换行 keep-all：在半角状态下的空格进行换行

9、letter-spacing 设置文字间间距 word-spacing 设置英文单词之间的间距

10、border-collspse separate:分离边框（默认） colapse(合并边框，不会挤压)

11、表格文本对齐：vertical-align : top / bottom /middle

12、浮动定位 float

　　　　将元素排除在普通流之外，元素在网页是不占空间的

　　　　浮动元素会放在包含框的左边或右边，但依然在包含框内

　　　　浮动元素在浮动时。可以向左或向右移动，直到碰到包含框或其他浮动元素位置

　　特点：

　　　　浮动元素边缘不会超过父元素的边框

　　　　浮动元素默认不会重叠

　　　　浮动只能左右浮动，不能上下浮动

　　　　所有元素设置为浮动元素的话，默认转换为块级元素

　　注，

　　　　子元素有浮动的话，记得给父元素加上overflow：hidden，意为拉子元素进入框中

　　　　设置overf后才能用padding设置位置

　　　　给父元素内所有子元素浮动后，不会撑开文本流。当给父元素内子元素绝对定位后会重叠

13、清除浮动 clear：left / right /both

　　　　巧用：clear:both,消除两个div之间的间距

14、margin:0 auto;设置居中的前提是设置宽高

15、显示 display

　　　　　　① none 元素不显示，并不占空间

　　　　　　② block 使元素像块级元素一样去显示

　　　　　　③ inline 使元素像行内元素一样去显示

　　　　　　④ inline-block 行内块

16、visibility

　　　　　　① visible 默认值，可见

　　　　　　② hidden 元素不可见，但占空间

　　　　　　③ collapse 用在表格上，可删除行或列，不影响布局

17、透明度 opacity （注，尽量用raba去设置透明度，因为opacity会影响父级元素下面的子元素）

　　IE中设置透明度 filter:alpha (opacity=value)

18、巧方法，不再父级元素上设置宽高度，而是设置子元素让其撑开

19、对齐，vertical-align:middle 针对行内元素img，可定义边上文字与当前元素的对齐方式记得给img加上align="absmiddle"属性

20、光标 cursor

　　　　　　pointer、crosshair 、wait、help、move、text

21、定位巧用：父类用相对定位，子类绝对定位（轮播图）

22、给父类元素加上相对定位后，子类元素会相对与父类元素

23、列表头前加图片：list-style-image:url();

24、设置列表的标识，list-style-position:outside（外部）inside(内部)

　　　补充 overflow:hidden可以清除浮动　　　　　　　　　　　　　　　

巴特西

css基础知识二

最新文章

热门文章