杂论

1、如何分析网页布局

（1）首先将网页分为三大部分：header、content、footer

（2）然后三个部分里面再用div细分

2、如果背景色盖住了背景图片说明背景图片的优先级不够高，加上父容器和元素名。如果想要背景

图片显示同时又有背景色的话就可以直接在background属性引入url之后加上颜色

3、调背景图片的位置用background-position：跟一个x/y轴方位，也可以两个都定义(可以是负值)

（1）如果方位直接定为具体像素的话，图片就不能随着浏览器界面改变而改变，会定在浏览器页面

某个位置

（2）如果是定为百分比的话就可以随着浏览器界面变动位置

4、设置浏览器的最小宽度：整一个页面定一个div（<div class="main">）然后设置main的

min-width为多少像素就好

5、在div中设置图片的大小用background-size:像素;

6、只想要表格的某一条边可以用：border-left(加左边的边)：像素 solid 颜色

7、border-radius：像素/百分比   是设置边框四个角的圆滑程度的

8、如果遇见鼠标悬停时背景图片的颜色发生变化，最方便的做法就是直接用hover换一个图片

9、行内元素如果要设置背景的话一定要先将其变为块元素display：block，再设置宽度width，

背景图才能够显示

10、solid是实线，dotted是虚线

11、在一个div中某一部分居中可用margin:0px auto

12、line-height调不了的用margin/pading调

13、表单里面那些什么什么框都是可以调整大小的（用width、height）

    例如：.search-wrap form input[type="search"]{width: 600px;height: 35px;}

    表单里面那些什么什么框填了背景色之后感觉填不满，就用border设置边框颜色

    去掉框的蓝边用outline：none

    设置光标在输入框中起始的位置：text-indent:像素

14、多出后隐藏用overflow：hidden；

15、想要鼠标悬停在某个元素上时，该元素里面的元素（如li里面的span的color）发生改变可以用

    li:hover span{color:...}   这种格式

    

16、想要去掉CD边角那些不是圆的地方可以用border-radius：50%

17、transparent表示的是透明的颜色

18、一般来说背景图片都是默认按照它原来的大小在浏览器中显示的，如果想要背景图片按照浏览器的宽度来显示的话就用background-size：100%

19、div本身是不包含padding值的，如果直接在div中设置padding值会导致内部字体的大小也会发生变化，这时可以加box-sizing：border-box，这样就可以只改变字体的padding不改变字体的大小和div整体的大小了

20、只要是css的文件都可以用<link>引入

21、如果一个div设置display：none就表示该div是隐藏的

22、设置字间距用letter-spacing

23、去掉table行列之间的间距用border-collapse:collapse;

24、图片和文字垂直居中对齐：vertical-align对inline-block最敏感。默认

属性是vertical-align:baseline

25、cursor：pointer；  鼠标放上去的时候会由箭头变成手

26、如果背景颜色把文字遮住了就把文字用::after中的content:""设置文字内容

27、要注意opacity=0时盒子还是是占位置的(也就是说下面的盒子不会顶上去)，但是display=“none”时盒子就是不占位置的(也就是说下面的盒子会顶上去)

28、在制作网页过程中尽量少用确切的数据定位

29、解决堆叠顺序问题（也就是说避免一个div被其他div覆盖）

    z-index属性：设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于较低顺序的元素的前面（覆盖）

    (1)z-index仅能在定位元素上凑效

    (2)该属性设置一个定位元素沿z轴位置，z轴定义为垂直延伸到显示区的轴，正数表示离用户更近，负数表示离用户更远

    (3)值：设置元素的堆叠顺序

30、如何把列表项中的小圆点改为小方块用：list-style-type:square

31、如果要一行写完背景的设置，那么背景图片的大小就用斜线“/”分割