重温html+css第二天：6月5日小结

新浪导航栏项目理解：

padding影响盒子还是有好处，有些盒子里面的文本元素很长，有些有很短，如果只给盒子设置相同宽度会显得不美观，这时候可以选择不指定宽度，直接使用内边距撑开盒子，即设置相同内边距，文本撑开的时候也是居中的，这样设计显得合理。
设计导航栏的时候，先考虑大盒子的宽度是一个div独占一行的块级元素还是可以改变宽度的行内块，设置好height，如果是行内块还要设置好width，然后考虑盒子的边框border四个方向实线还是虚线之类的，然后考虑边框颜色，背景颜色；然后考虑盒子里面的内容，导航栏一般都是a链接，首先得考虑用tdn去除下划线，然后字体大小颜色，然后考虑行高line-height，因为文本得居中，但是a链接占的一小部分行内元素是没有高度的，所以要把行内元素转换为行内块元素，即使用display：inline-block；再就可以设置高度height了，然后可以写内边距padding（就是文字到盒子两端的距离）；然后因为鼠标移动会变色，这明显就是伪类的使用，直接写一个.nav a：hover{}在大括号里面配置背景色和字体颜色就ok了。

text-indent段落前面的间距，常用2em
padding也有不会撑开盒子的情况，比如块级元素单独撑开一行，但是在css样式里面如果不写width，padding不会撑开超过盒子本来的大小，但是一旦写了，肯定会撑开如果过大会出现滚动条。
父级元素如果设置了宽高，子级元素会默认在父级元素的盒子内，但是一旦给子级元素也设置width和height，再来个padding，那么就会撑开子级元素的盒子超过父元素盒子，就会不美观
外边距margin，就是控制盒子与盒子之间的距离，和padding的使用方式基本一致，外边距的最广泛使用就是让块级元素水平居中，得满足两个条件：第一是必须有width，第二是把盒子左右外边距设置为auto
如果想让行内元素或者行内块元素居中对齐，就给它们的父级块级元素设置一个tac即可
使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并，这就涉及到了嵌套块级元素的塌陷问题（如果父元素和子元素都存在外边距最后他们的外边距会使用较大的一个）（就是给子元素添加外边距，父元素会塌下来，所以称为塌陷问题），
解决塌陷问题的方案：1.为父元素定义上边框；2.为父元素定义上内边距；3.为父元素添加一个overflow：hidden
盒子模型创建时有些元素会默认带一个内外边距，一般开始的时候用*{padding:0 margin:0}把默认的内外边距清掉
行内元素尽量只设置左右的内外边距，设置上下的内外边距也不会有效果，想设置上下的话可以转换为行内块元素再去设置
测量像素可以通过ps软件

小米商城一小块儿的案例：

准备一个大盒子设置宽高和背景，想让大盒子水平居中就用margin ：auto，放入一个图片，图片过大的话可以设置宽度width：100%，评论区域要给一个高度，因为要把剩余的元素对齐，margin-top和padding-top要善于合理的使用，评价来自于那个小模块，同前面的评论区域的方法即可，详情模块儿涉及到块级元素转换行内块元素用dib即可，涉及到a链接因为自带字体色和下划线，故需要手动设置color和tdn

标签都有语义，合适的地方要放合适的标签，一般标题用h，大量文字就使用p
margin和padding很容易混用，一般margin使用的比较多

品优购一小块儿的案例

，一个大盒子div，上面部分用一个h占一行，要设置宽度就转行内块，下面使用无序列表ul加li就行，设置样式居中涉及行高和magin，设计边框使用border，
涉及到文字的显示问题用到magin和padding这里，要考虑盒子是否被撑开；设计a链接就要去除下划线用tdn，改颜色color，取消li的小圆点就用list-style：none，然后设置li的高度height，还有文字居中line-height等于高度即可；涉及鼠标移动会出现下划线的特效就要使用伪类hover，去除下划线是tdn，加上下划线是tdu

圆角边框：border-radius：10px，也可以用百分比使用，如如果想把一个正方形变成一个圆，就可以写50%，这里一样可以设置四个参数
CSS3增加了盒子阴影效果，h-shadow水平阴影，v-shadow垂直阴影，也有复合写法，就写box-shadow，它可以有五个参数；盒子阴影是不占用空间的 ，如果要设置本来没有阴影，鼠标经过的时候才有，就用伪类hover
文字阴影text-shadow，和盒子阴影效果差不多使用，可以有四个参数

CSS布局盒子有三种方式：标准流（普通流），浮动，定位
CSS浮动float，属性值只有none，left，right
div块级元素变成行内块使它们在一行展示的话，每个div之间会有一个间距
多个元素（盒子）纵向排列用标准流，横向排列用浮动
浮动属性如果添加两个盒子，比如都添加左浮动，那么它们会挨着左边缘
浮动的元素会脱离标准流，浮动的盒子不在保留原来的位置，就是一个浮动一个不浮动的话，标准流的盒子会跑到浮动的盒子的下面，实现叠加效果，这个叫脱标
任何元素都可以添加浮动，且添加完以后具有了行内块元素的特点，如果块级元素没有设置宽度，默认和父级一样宽，但是添加浮动以后它的大小会根据内容来决定，浮动的盒子之间是紧挨在一起的
浮动元素经常和标准流的父级搭配使用，可以通过父元素约束浮动，比如一个左浮动，一个右浮动
在浮动的设置上面要考虑外边距和权重的问题，比如浮动的最后一个盒子一般要清除外边距
页面布局的过程中先设置盒子大小，再确定位置，确定div还是ul li还是p还span等，再考虑是否需要浮动（先用标准流排上下的位置，再排列左右元素）
浮动的盒子只会影响后面的标准流，不会影响前面的标准流
清除浮动的原因：父盒子很多情况下不方便给高度，但是子盒子浮动又不占位置，所以它脱离文档流的位置，会对后面的排版产生影响
清除浮动的本质就是清除浮动造成的影响，用额外标签法clear：both，也叫隔墙法，但是添加了很多无意义的标签，故很多时候不推荐使用
清除浮动的方法有三种：1.父级元素添加overflow：hidden。2.父级元素添加after伪元素（没有添加额外标签）。3.父级元素添加双伪元素（代码更加简洁）。4.额外标签法

学成在线的案例：

1、采取结构与样式相分离的方法（就是html和css分开）；第一步都是清除div的默认内外边距；CSS书写顺序有规范；确定网页的版心，就是垂直方向上的div；分析行模块儿，再分析每个行模块儿的列元素，比如是否float等；先写大小，在写位置；可以先写一个类样式，后面有盒子需要这个版心盒子就直接加一个class就行；
2、先做头部区域，给盒子一个左右外边距居中，给盒子一个上外边距，用ps切图然后把logo图片导入到盒子；导航栏nav一般不会直接用a链接，一般使用ul和li标签进行包裹，去除a链接的小点用lsn，去除a链接的下划线用tdn；然后给li加浮动，因为li是行内块元素，会垂直排列；a是行内元素要转换为块级元素才能设置宽度，因为导航栏里面的文字不是一样多，所以最好给a链接一个padding撑开盒子，不要设置a链接的宽度；鼠标经过链接会显示带颜色的下划线，很明显是伪类，给a设置一个hover：{border-bottom}即可；然后搜索框设置该有的属性，里面的文字样式也要设置，value指的input框里面的默认值；行内块元素之间默认会有缝隙，所以在设置的时候会出现明明px刚刚好，却显示在下面的情况，这时候可以通过加浮动来解决；然后写用户小模块，最后去除各个盒子的背景色头部区域就好了；
3、然后处理中间区域，先设置一个大盒子，然后在大盒子里面写一个版心，然后分模块儿，左侧的导航栏需要ul li里面放a链接，然后显示是背景半透明通过rgb设置实现；每个栏里面的符号可以通过右浮动解决，然后鼠标放上去会变色用伪类hover解决；右边的课程表模块儿用一个h和一个div写给大盒子一个右浮动，h给它一个高度和背景色，排列整齐的内容模块儿就用ui li来处理，给左右加一个padding文字就会被挤到中间（并不是居中，只是装文字的盒子居中了），给上下加一个padding就会使每个li上下区域有所间隔，根据需求来设定，这时候就能看出复合写法的优势，然后给每个li添加下边框border-bottom：solid实线；然后有个全部课程的框，因为li是行内元素无法设置宽高，可以转换成块级元素用display：block即可，然后设置盒子的高度，设置行高（使文字上下居中用），设置tac使文字左右居中，设置颜色，这里的颜色指的是文字的颜色。
4、最后做下面的精品推荐小模块，先构思，用一个大盒子，三个小盒子，大盒子设置左右居中，设置高度；然后设置三个小盒子分别是h，ul li，a，然后a链接右浮动，给li增加浮动，这里li根本没有设置宽度，设置padding没用，padding是撑开盒子用的，但是a链接是有默认宽度的，想调整可以转为行内块。
5、精品推荐大模块，分为上下两部分，上部分左浮动一个h，右浮动一个a链接，设置好magin值即可；
在下面的模块设置ul li，给li设置宽高和浮动，有缝隙就设置margin-right，最后一个盒子一般不需要右边距，要么修改最后一个盒子的样式（利用css的层叠性），也可以直接把整个ul的宽度变长
最后往li里面放内容，每个li里面上面是图片，下面放小标题，设置好文字的样式，主要是设置居中和字体，颜色等。
6、尾部footer的布局，写之前会发现要清除浮动用clear或者父元素设置overflow，
a属于行内元素，没有大小，所以设置宽高之前要转换为块级元素，dl dd自定义列表，适合那种看着像列表，表头字比较大的那种。

CSS定位：有些效果标准流和浮动无法实现，比如有些模块需要固定在页面中不变。定位就是把盒子定在一个位置 ，定位=定位模式+边偏移
定位模式：position：有四种属性值fixed，relative，absoulted，static（很少用）
边偏移就是盒子的移动到最终位置，有top，left、right、bottom。
静态定位按标准流的特性，没有边偏移
相对定位：相对原来的位置来说