html+css核心知识总结

1.Web 标准
结构 （html,xhtml）
表现 （CSS）
行为 （ECMAScript）

2.手写HTML5的基本结构

3.img 标签的相关属性

Image.png

11.font-size:文字大小
浏览器默认字体大小 16px;
浏览器最小字体 9px
设置 font-size:0; 可以让字体隐藏

字体倾斜
font-style:
normal
italic/oblique 字体倾斜

text-align 文字水平对齐方式
left 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
注意 text-align可以控制文字或小标签的水平对齐方式(属性需要设置给 父类元素的大标签中)
注意 文字相关的属性是可以继承的

一行文字占得高度：
行高组成 上间距 + 文字高度 + 下间距

tip: 大标签没有设置高度时行高也可以充当盒子的高度;
当父盒子设置高度时 line-height 就只能用来调整文字在父盒子中的位置
(1).当行高等于容器(父盒子)高度时 文字相对于容器(父盒子)纵向居中
12.字体线条
******
underline 下划线
overline 上划线
line-through 中划线/删除线
none
******
text-indent 首行缩进 (必须设置给大标签)
数值类型 (px,em)
text-indent 可以设置负值
list-style-type 列表符号

                circle  空心圆
                square  方块
                none  

list-style-position 控制列表符号的位置
outside 外边
inside 里边
13.符号

        <   <
        >   >
        © ©

14.background用法
背景是依托于盒子(容器)

        背景图
        background-image: url(../images/2.jpg);

        背景图较容器小 则会平铺(水平方向和垂直方向平铺) 
        背景图较容器大 只显示容器大小部分

        背景平铺  
        background-repeat:
        repeat  （水平方向和垂直方向平铺）
        no-repeat  不平铺
        repeat-x   水平方向平铺
        repeat-y   垂直方向平铺

/* 大标签水平居中的方法 */
margin: 0 auto;

background-position
background-position-x 水平方向 left center right 数值
background-position-y 垂直方向 top center bottom 数值

背景图固定
background-attachment:scroll/fixed;
scroll 默认 会跟着容器一起滚动

        fixed   固定  相对于窗口固定(但只在容器中显示，超出容器时不显示)；
        通常配合 background-position: center center;  来定位置

15.margin-top 的 BUG?
当父子元素都是正常文档流，给子元素设置margin-top,子元素的margin-top会传递给父元素(作用到父元素身上)

        1. 给父元素或子元素设置float   =>  可能会产生新的float问题
        2. 给父元素设置border-top或padding-top   => 增大父子的实际高度
        3. 给父元素加overflow:hidden;
在正常文档流中,相邻的同级元素如果发生margin-top,margin-bottom重叠的情况，按大的来算

如果给小标签设置float属性，会把小标签隐式的转换成大标签

16. margin 的用法
一个值 代表四周
两个值 第一个代表上下，第二个代表左右 margin: 50px 100px; margin:0 auto;
三个值 第一个代表上,第二个值代表左右,第三个值代表下 margin: 100px 50px 25px;
四个字 上右下左

17. padding 介于内容和边框之间

1. 用来调整内容在容器中的位置关系
   在定宽定高时，使用padding会撑大元素，如想保证元素大小不变，所以最好将内容区域减去对应的width，height
   设置该属性 只有内容区域有背景颜色 ，padding区域没有背景颜色
   background-clip: content-box;
   background-clip属性用来定义元素背景的裁剪区域，即背景的显示范围，可选值有 border-box | padding-box | content-box，默认值为 border-box。
   2.float 的元素不设置宽高的情况下靠内容撑开.

18.清除float对同级元素造成的影响

clear 清除float对同级元素造成的影响 ( 浮动的元素会脱离文档流 1. 同级的元素上来占位置 )
none 默认 不清除
left 清除左浮动对同级元素造成的影响
right 清除右浮动对同级元素造成的影响
both 同时清除左右浮动对同级元素造成的影响
clear both 清除对同级元素造成的的影响,是其回到正常的布局,顺带也解决了对父元素造成的影响

19. overflow
overflow-x：x方向上有滚动条
overflow-y：y方向上有滚动条
visible 默认值不做任何操作
hidden 溢出隐藏
scroll 出现滚动条 （无论内容是否溢出都会出现滚动条）
auto 自适应（如果内容超出则显示滚动条，否则正常显示）
inherit 继承父类元素的overflow属性

20.white-space:
normal 默认
nowrap 文本单行显示，不换行
pre 保留空格和换行
pre-wrap 保留空格，进行正常的换行
pre-line 合并空格，保留换行符

多行文本溢出

display：-webkit-box；
-webkit-line-clamp：10；
-webkit-box-orient： vertical；
overflow:hidden;

/* 聚焦 当鼠标点击输入框 输入框出现光标时 /
/ 去除输入框 聚焦时的蓝色边框 */
outline: none;
21.标签

大标签
独占一行，可以设置宽高，作为嵌套的容器(盒子);

    小标签
        多个元素可以在一行显示，宽高不生效，元素的宽高靠内容撑开，padding,margin的部分属性不生效
        (img,input  可以设置宽高，padding,margin正常生效)

    内联块状元素
        多个元素可以在一行显示，可以设置宽高，padding,margin正常生效
        代表（img,input,select,textarea,button）
        vertical-align(内联块状元素);

注意：多个内联元素或内联块状元素在一行显示，中间会出现间隙(标签换行产生)
解决办法：
1. 标签不换行
2. 设置float
3. 给父元素设置 font-size:0; 如果父元素中有其他文本，需要给其重新设置font-size

22.图片的三像素BUG （一个包裹图片的父元素，没有设置高度时，图片会将父元素撑大大约3px）

1.给父元素设置高度.
2.给图片设置 vertical-align：top；
3.给图片设置 display：block；
4,给父元素设置 font-size：0；

/* 转换为怪异盒模型（IE盒模型） 元素的width,height从border开始计算 /
/ box-sizing: border-box; /
/ 标准盒模型 元素的width,height从内容(content)开始计算 */
box-sizing: content-box;

23.三大定位

1.固定定位
position: fixed;
1. 会脱离文档流(如果不设置宽高，靠内容撑开，如果不设置left,top,可能盒子在原来位置定位)
2. 参照物是当前窗口

位置
水平方向   left/right
垂直方向   top/bottom

2.相对定位(relative)
相对于自己原来的位置定位
1.相对定位不会脱离文档流(始终占据原来的位置)
2.一般做绝对定位的参照物属性

/* 子选择器 只会选择.par 中的子一级元素（）*/
.par>li

3.绝对定位
1.会脱离文档流
2.设置了绝对定位的元素会从当前元素的父元素开始向上查找各种定位属性(relative,absolute,fixed),如果找到则相对该父元素定位，找不到则继续向上一层查找, 如果最终没有找到的话则相对于窗口顶部定位。

注意：
z-index 可以调整定位元素(relative,absolute,fixed)的层级
z-index:value;

24.浏览器的五大内核

        Trident  IE，360，遨游，QQ   
        Gecko     Firefox    
        Presto   Opera
        Webkit   Google Chrome ,Safari
        Blink    Opera( Opera, Chrome 共同开发)

浏览器前缀:

        -ms-      IE     
        -moz-     Mozilla Firefox
        -o-       Opera
        -webkit-  Chrome 

25.BFC 块级格式化上下文

        1. 块级元素自上而下排列，独占一行
        2. 相邻的块级元素，上下的margin会重叠
        3. BFC区域中的元素，其左边的margin和父元素左边的margin相接触
        4. 在计算BFC区域高度时，会把float的元素的高度也计算在内
        5. BFC是一个独立的渲染区域，该区域的所有元素不会影响外面的元素
        6. BFC区域不和float区域重叠

26.border-radius
/* 四周 /
border-radius: 4px;
/ 两个值 左对角，右对角 */
border-radius: 4px 50px;

        /* 三个值  左上  (右对角)  右下  */
        border-radius: 4px 50px 100px;

        /* 四个值  顺时针  左上  右上  右下  左下 */
        border-radius: 4px 25px 50px 100px;

    em 是相对于父元素的 font-size，容易受父元素影响，而导致布局出现问题
    rem 相对于根元素 html 中的font-size

27.transition 和animation的共同点和区别

共同点
1. 都可以完成一些简单的过渡效果

    不同点
        1. transition 必须要通过一定的手段(:hover,:focus,:checked,click触发
        2. transition 只能完成一些简单的过渡效果，对于复杂的效果需要靠animation来实现 
 -->

28.伪对象::before和::after

/* 在元素的最后方添加一个伪对象(标签、元素) */
.box::after {
content: "我是后边添加的文字";
color: aqua;
}

    /* 在元素的最前边添加一个伪对象(标签、元素) */
    .box::before {
        /* content: "我是前面添加的文字"; */
        /* content: url(../images/3.jpg); */
        content: attr(youTitle);
        color: red;
        /* width: 100px;
        height: 100px;
        background-color: #6ff;
        display: inline-block;
        vertical-align: middle; */
    }