css重难点笔记

时间:2022-01-30 11:36:29

只有定位(static除外)的盒子才有z-index,即对静态定位,文档流和浮动设置z-index,都是无效的。

一个盒子如果未给宽度,那么被浮动,绝对定位,display:inline-block之后盒子的宽度会变成内容的宽度。

给了宽度再给padding值盒子会被撑开,不给宽度则不会!

区域是否划分在一块儿一般根据相关性原则

浮动文字的时候必须设置宽度,因为正常情况文字都是直线横向占整个宽,浮动过去空间不够,因此需要设置宽度才能浮动。

间距可以使用高度剩余法和宽度剩余法来显示。

关于标签嵌套

  1. 块级元素 内部可以嵌套任何元素, p元素除外
  2. 内联元素 只能放内联元素
  3. p元素内不能放块级元素
  4. a元素无所不能,但是不能放input元素 和a元素

行内元素只能设置左右内外边距,上下的设置无效,因此最好不要设置。

网页组成部分 html (结构)+ css(样式) + javascript(行为)。

先结构,后样式,再行为。

css3虽然存在兼容性问题,但是已经被大量使用,只要不影响页面布局和可读性,一般的小差异可以使用css3没关系。

Span.icon$*3

页面布局所有元素都看作盒子

对于盒子需要按顺序来考虑/设置

1.盒子的宽度和高度 2.盒子的背景和边框 3.最后才考虑盒子的位置。

I/S/U/em等标签常用来做小装饰的容器

清除浮动:.clearfix:before,.clearfix:after{content:""; display:"block"; clear:both;visibility:hidden;overflow:hidden; }

一.项目准备

1.规划好页面

项目文件夹

1)index.html 2)css文件夹 (base.css/global.css;  index.css)

3)images文件夹 4)js文件夹

2.初始化css

3.引入css

定位选择法则:

定位:1.定(以什么为参照物)  2.位(本身到底有没有位置)

常用口诀:子绝父相(相对定位做容器,内部用绝对定位)