HTML+CSS

HTML+CSS笔记

一、box-shadow

默认值为0，前面两个值分别代表阴影在x轴的位移、在y轴的位移，都为0，证明阴影没有偏移，所以完全和元素重叠，看不出来。

指定单个 box-shadow 的用法：

1. 给出两个、三个或四个数字值的情况。

    1. 如果只给出两个值, 这两个值将被浏览器解释为x轴上的偏移量 <offset-x> 和y轴上的偏移量 <offset-y>。
    2.如果给出了第三个值, 这第三个值将被解释为模糊半径的大小 <blur-radius>。
    3.如果给出了第四个值, 这第四个值将被解释为扩展半径的大小 <spread-radius>。

2. 可选， 插页(阴影向内) inset。
3. 可选， 颜色值 。

---

二、float、定位

设置了float、absolute、fixed的元素会自动转换为块级元素（类似于行内块）

1.float

清除浮动方法：

1. 给父元素设置overflow:hidden;
2. 给父元素设置高
3. 添加伪元素清除浮动

    <div class="father">
        <div class="son"></div>
    </div>
    
    .father {
        /* height: 200px; */ 清除浮动方式1
        /* overflow: hidden; */清除浮动方式2
        background-color: pink;
    }
    
    .son {
        float: left;
        width: 300px;
        height: 200px;
        background-color: purple;
    }
    
    /*清除浮动方式3*/
     .clearfix::after {
            display: block;
            content: "";
            clear: both;
            height: 0;
            visibility: hidden;
        }
        
        .clearfix {
            *zoom: 1;
            /* IE6、7 专有 */
        }

2.定位

css布局三种机制在页面中的顺序： 标准流 < 浮动 < 定位

1. 相对定位：

 1.相对其原来在标准流中的位置进行定位的
 2.但其原来在标准流中的位置仍然保留

2. 绝对定位：

1.标准流的子盒子总是以父级为标准移动位置
2.相对于其最近的父元素（祖先）并且设置了定位的元素进行定位
3.如果父盒子没有设置定位，则是以浏览器定位
4.完全脱标，不占位置
5.子绝父相

3. 固定定位：

1.完全脱标
2.以浏览器的可视窗口进行定位

1.父元素定位基准：父元素的内容区（也即是content（width+height）+padding区域，不包括border和margin。

2.子元素定位的边界是包括子元素的 整体 = margin + border + padding + content ;的margin外边界为基准进行定位。

总结：如果子元素设置了定位元素，但是没有设置left top 等值，子元素依然会收父元素padding值影响

---

三、background

1.background所有属性

background：

• background-color：背景色
• background-position：背景图片位置
• background-size：背景图片尺寸
• background-repeat：背景图片是否重复
• background-origin：背景图片定位区域
• background-clip：背景的绘制区域 border-box|padding-box|content-box
• background-attachment：属性设置背景图像是否固定或者随着页面的其余部分滚动 scroll 默认值（滚动） fixed （不会滚动）
• background-image：背景图像

 所有属性合写：
 background: #00FF00 url(bgimage.gif) no-repeat fixed top;

2.设置背景色渐变

• background: linear-gradient(direction, color-stop1, color-stop2, …);
• direction 用角度值指定渐变的方向（或角度）。
• color-stop1, color-stop2,… 用于指定渐变的起止颜色。

 background: -webkit-linear-gradient(left top, #6cc9b7, #3979cc);

3.设置字体颜色渐变

  background: linear-gradient(to bottom, #fff, #ccc, #FDF7EE);
  /*以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉*/
  -webkit-background-clip: text;
  /*设置字体颜色透明，这样不会遮住div的背景色*/
  color: transparent;

四、外边距和内边距

1. 外边距塌陷问题

• 相邻块元素垂直外边距的合并 尽量只给一个盒子给外边距
• 嵌套块元素垂直外边距的合并（塌陷）

/*解决嵌套块元素垂直外边距的合并问题*/
border:1px solid transparent;
padding:1px;
float:left/right
position:absolute
display:inline-block
overflow:hidden/auto

2.外边距内边距缩写时值的情况

以margin为例，padding同理

• margin为4个时，margin:上 右 下 左;（为顺时针方向）
• margin为3个时，margin:上 左=右 下;
• margin为2个时，margin:上=下 左=右;
• margin为1个时，margin:上=右=下=左;

五、a标签和img标签问题

练习做苏宁易购案例时，做广告图片时，发现图片下面一直有一个大的空白，最后经过各种研究发现竟然是上面设置的行高影响了，导致a的line-height为75了,把盒子撑开了，所以一直有一个行高存在。

设置行高为line-height:0;

六、line-height

line-height 的值可以是一个长度（length）或者是一个数字,或者百分比，它的默认值是 normal。

• 1.normal

normal属性是根据浏览器来计算行高的，父子元素都是。

取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2，这取决于元素的 font-family。

• 2.<number

number*字体大小

该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常，由此描述可见，number的计算值与文字本身的大小有关系，即`line-height : number * 文字本身的font-size`

• 3.
  固定值

指定<length>  用于计算 line box 的高度。查看<length> 获取可能的单位。

• 4.

percentage也是根据父元素font-size产生的行高，导致三段问题行高相同！

与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。，由此描述可见，number的计算值与文字本身的大小有关系，即`line-height : number * 父元素字体的font-size`

七、 去除inline-block元素间间距的方法

设置 font-size: 0;

这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器，就是Chrome, 其默认有最小字体大小限制，因为，考虑到兼容性，添加下面的代码

  font-size: 0;
  /*考虑兼容性 */
  -webkit-text-size-adjust:none;

八、 display取值可能

display可取值：
display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 等等。

九、可替换元素和不可替换元素

1.替换元素：替换元素根据其标签和属性来决定元素的具体显示内容，等。替换元素一般有内在尺寸如img默认的src属性引用的图片的宽高，表单元素如input也有默认的尺寸。img和input的宽高可以设定。

2.不可替换元素：即将内容直接表现给用户端。

注意：几乎大部分的替换元素都是行内元素，所以说如input、img、textarea是行内元素但是是可以设置宽高的说法。