HTML与CSS基础
表格
<table>//table下面会默认有一个<tbody>
<thead></thead>
<tbody>
<tr>
<td></td>//默认水平居中，用valign=“top/buttom/middle”设置td内容垂直位置，可用于tr
//align设置水平方向位置
//cellspacing单元格之间距离
<tr>
</tbody>
<tfoot></tfoot>
<table>
| 标签 | 属性 |
|---|---|
| table | cellspacing:单元格之间距离 |
| cellpadding:单元格内容填充 | |
| align:表格在父元素中居中 | |
| tr | align:水平方向，center/left/right |
| valign:垂直方向，top/midle/buttom | |
| th/td | td中colspan=‘2’:跨列合并，删除同一行2-1个td |
| tr中rowspan=‘2’:跨行合并，删除同一列2-1个td | |
| th是表格的表头 td是普通单元格 | |
| 可选标签 |
标签嵌套规则
- 里面不能放
- 必须在下的里面
- ，
里面不能放所有块级元素
- 行内元素尽量不嵌套块级元素
层叠样式表CSS
引入样式
- 1、外部样式表：//方便维护，结构样式分离，满足w3c规范（规则）
- 2、内嵌样式表：
- 3、内联样式表：标签中写style，//不满足w3c规范，不满足js操作（重置）
- 4、导入样式表：@import url(‘css文件’);//1.会先加载link，才知道要加载哪些import文件 2.不能并行下载多个import样式 3.如果网页太大，会出现网页样式不显示，页面闪烁后再显示样式
引入优先级：就近原则（顺序）
语法
选择器（找到哪个标签）{
属性（改变什么样式属性）：值（改成什么值）；
属性：值；
}
css选择器
命名规范：
-
不能以数字 不能有中文
-
以英文开头不能有特殊符号,中间可以有 ’ _ ’ ’ - ’
-
驼峰命名法
-
BEM ==> block-element-modifier https 😕/ww. jianshu. com/ p/be897aaad512
-
基本选择器
1、元素选择器 body{ },h1{ },div{ } //标签名{ }
2、类选择器 .name1{ } .name2{ },//一个标签可以由多个类
3、ID选择器 #id{ } , //一个id只能使用一次，一个标签也只能有一个id
优先级：id > class > 元素 （标签内的style最大）
4、通配符选择器 *{ //一般拿来取消全局样式
margin:0;
padding:0;
}
-
复合/派生选择器
.box ul li{//下面div的ul里的li（所有的） //后代选择器（123，456都为红色） color:red; } .box > ul >li{//第一级子代（直接子元素） //子代选择器（456位绿色） color:green; } h1,h2,h3,h4,h5,h6{//并集选择器 color:red; } h3.red{//交集选择器（111为绿色） //有几个类写几个.class（无空格） color:green; } .clearfix::after{ //双“ ： ” //伪元素选择器 content: ""; display: block; //转为块级元素 clear: both; } .box a:hover{ //鼠标移入变为红色 color:red; } <h3>789</h3> <h3 class="red">111</h3> <div class="box"> <ul> <li>123</li> <li> <ul><li>456</li></ul> </li> </ul> </div> -
常用伪类
a:link{ //未访问 color:red; } a:visited{ //已访问 color:blue; } a:hover{ //移入时 color:green; } a:active{ //选择时 color:yellow; } 使用要注意顺序 -
选择器权重：
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0根据优先级（引入/选择器/顺序）相同属性覆盖，不同属性叠加
css常用属性
width:200px(像素点) / 50%(百分比) / 50em(如果自己没有font-size继承父元素的字符大小);
height:200px;
min-height:200px; //最小高度
max-height:200px; //最大高度
line-height:200px; //行高（可用于文本垂直居中,不带单位代表字体倍数）
background:red;(背景色)
color:red/#ffff00/rgb(110,110,110)/rgba(0,0,255,0.5)(透明)//字体颜色
font-size:20px;//网页默认字体大小16（谷歌），可见的最小值是12
font-style:italic(斜体)/normal(默认) //字体样式
font-weight:bold/100-900 //字体粗细
font-family:'宋体','微软雅黑' //字体类型,前一个不存在，执行后一个
简写：
font:(font-style | font-variant | font-weight | font-size | line-height | font-family)
text-align:left/center/right //文本水平对齐
text-decoration:underline(下划线)/line-through(中划线)/overline(上划线)/none(无)
text-indent:2em //首行缩进
text-transform:uppercase(转换为大写) / lowercase(转换为小写)
capitalize(首字母大写)
direction:rtl（右） / ltl(左) //文本对齐
letter-spacing:10px; //字符间距
word-spacing: 10px; //单词间距
word-wrap:
word-break:bresk-all; //强制折行
white-space:nowrap; //不换行
border-left:1px solid red;
out-line:1px solid red; //外边线，不占位置
border-left-color:
border-left-width:
border-left-style:
border-radius:5px 5px 5px 5px; //圆角，左上，右上，右下，左下
border- radius: 5px 15px 25px; //左上 右上左下 右下
border- radius: 5px 15px; 左上右下 右上左下
border- radius: 5px; //四个角
border- radius: 50%; //圆形
.box{ //border画三角
width:0;
height:0
border-left:10px solid transparent;
border-left:right solid transparent;
border-top:right solid red;
}
border- radius原理？
background-color:red; //背景颜色
background-image:url('图片地址') //背景图
background-repeat:no-repeat(不重复)/repeat-x(x轴重复)/repeat-y
background-position:10px 50px(离左边10px，上边50px)/center center(可以用一个，在正中)
background-size:cover(把盒子铺满，图形可能显示不全)
background-size:contain(图片显示完全，盒子可能不会铺满)
background-size:100% 100%(百分比放大)
background:(以上属性都可以写，空格隔开，加上'/'再加大小)/100% 100% no-repeat
background:none; //没有背景
background:transparent //背景透明
overflow:hidden; //溢出隐藏
overflow:visible; //溢出可视
overflow:scroll; //溢出滚动条
overflow:auto; //超出部分产生滚动条
overflow-x
overflow-y
dispalay://元素转换
display:inline; //元素转为行内元素
display:block; //转为块级元素
display:inline-block; //转为行内块
display:none; //不显示元素，不会再页面占位
转义字符：
空格
  英文空格
© 版权号
> >大于
< <小于
对于input：
设置transparent后会使placeholder也透明，可用伪元素选择器
.box input::placeholder{
color:white; //设置提示颜色
}
ul{
list-stlye-type:disc; //默认小圆点
list-stlye-type:none; //取消默认小圆点
list-stlye: //简写
}
*{ //通配符选择器
margin:0; //取消所有元素边距
padding:0; 取消所有元素填充
}
重置样式表
rest.css / Normalize.css
利用背景图像定位实现的 图像拼合/雪碧图/css拼合精灵
意义：减少http请求，加快网页加载速度
icon{
width:
height:
border:1px solid black;
background:url('图片')
background-position:-xxxpx -yyypx;
}
哪些属性会继承？
width,
块级元素和行内元素
块级元素
- 独占一行固定的
- 宽度默认是继承父元素100%
- 可以设置宽高
- 高度由子元素撑开（父元素的高度 是具有正常文档流的子元素的高度之和）
行内元素
- 默认宽度是内容大小
- 默认不可以设置宽高
- 所有元素可以在通一行排列显示
行内块元素
-
会有一个不固定的默认宽度
-
可以在同一行显示
-
可以设置宽高
代表：input
为什么要用div，div没有默认样式
行内元素和行内块元素换行会产生一个不确定的间距
- 删掉空格或换行
- 父元素的font-size:0px;
- 字符间距letter-spacing:-4px;
文档流
正常文档流
根据块级元素或者行内元素特性 从上到下 或 从左到右排列
浮动产生浮动流
让元素从左到右排列
浮动
父元素的高度 是具有正常文档流的子元素的高度之和
浮动：
浮动的元素 会脱离正常文档流(不完全，内容没有脱离) 不占据正常文档流空间，产生一个浮动层
浮动后的元素 的显示方式为 行内块，会释放原来的空间
父元素高度会塌陷，谁浮动谁脱离文档流，影响的是后面的兄弟，不会影响前面的兄弟
解决子元素浮动 父元素高度塌陷的方法:
1、父元素加固定高度
2、父元素加overflow:hidden (BFC)
### BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参 与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
触发BFC：
只要元素满足下面任一条件即可触发BFC特性，
body根元素
浮动元素: float 除none 以外的值
绝对定位元素:
position (absolute、 fixed)
display为：
inline -block、table cells、 flex
overflow除了visible 以外的值(nidden auto. scro11)1
BFC内部元素无法影响外部内容(解决margin塌陷)
同一个BFC下外边距会发生折叠
BFC可以包含浮动的元素(清除浮动)
BFC可以阻止元素被浮动元素覆盖
利用BFC实现两栏布局：
左边浮动，右边自适应
3、清除浮动 在父元素结束标签之前加空div(块级元素) 然后样式为clear: both;
4、伪元素模拟第三种的清除浮动方法
clearfix::after{ //双“ ： ”
content: “”;
display: block; //转为块级元素
clear: both;
}
伪元素： //css3
伪元素选择器：.xxx::after{content:''}/.xxx::before{content:''}
//在xxx之前或之后添加内容,必须至少包含content,可以为空
//默认为行内元素，可用display:block;转换为块级元素
所有元素通过浏览器检查工具都要有高度
盒子模型
标准盒子模型：内容（content）+ 内填充（padding）+ 边框（border）
-
内填充：padding(会改变盒子大小)
padding:1px //上下左右
padding:1px 1px //上下 左右
padding:1px 1px 1px //上 左右 下
padding:1px 1px 1px 1px //上 右 下 左
-
外边距：margin（同上）
行内元素 margin只有左右有效
ie盒模型：width=内容+padding+border
谷歌实现ie盒模型：box-sizing:border-box; //css3属性
水平居中
-
让块级元素在父元素中 水平居中
.box{ //子元素 width:1000px; //要先有高度 margin-left:auto; margin-right:auto; }
垂直居中
-
基线对齐
使用line-height: //对文字有效 对图片：//行内块元素与文字垂直对齐 给行内块设置 line-height:(在父元素设置，使文字居中) vertical-align:middle //子元素，选择基线(中线)
块级元素水平垂直居中？
前六种都与大小有关
-
使用margin计算距离
如：（一般只标记两边，类似坐标）
margin-left: 100px; margin-top: 100px; -
子元素先设置display: inline-block; 父元素再设置text-align: center
如：
.box{ text-align: center; line-height: 400px;（行高） } .child{ display: inline-block; } -
css3平移
在子元素中设置transform: translate(100px,100px);
距离左边和上边100px
-
使用css3的计算函数calc，注意运算符前后要有空格
如：（子元素中计算）
margin-left: calc(50% - 50px);（从水平50%处开始，-50px） margin-top: calc(50% - 50px);（从垂直50%处开始，-50px） -
子元素绝对定位，父元素相对定位
如：
.box{ position: relative; } .child{ position: absolute; left: 50%; margin-left: -50px; top: 50%; margin-top: -50px; }(效果同上) -
在第五种基础上 结合第四种
如：
.child{ position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); }(效果同上) -
在子元素中设置auto
如：
.child{ position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; }（不需要考虑子元素大小） -
父元素设置弹性布局
如：
.box{ display: flex; justify-content: center; align-items: center; }9.父元素设置
text-align:center;
line-hight:100px;
父元素：
子元素高度不定：
.box{
width:100px;
position:absolute;
top:50%;
transform:translateY(-50%)
background:red;
}
外边距合并
对于正常文档流：
父元素中，正常文档流的子元素 margin-top 和 margin-bottom 会有外边距合并问题—上下取最大，包括第一个子元素与父元素之间
. bigBox{ //父元素
width: 500px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
background:
gray;
border: 1px solid #000;
}
item{
width: 100px;
height: 50px;
margin-top: 20px;
background :
Odeeppink;
} //子元素 子元素间距变为40px
解决方法：
* 给父元素加 overflow: hidden;
* 不给第一个设置上边距 ，给父元素设上填充
（不适用方法：父元素加边框border,设置浮动）
一切归结于BFC
两端对齐，中间间距的布局
- 每一行第一个单独加类 取消边距
- 给父元素设置负边距
- 结构性伪类选择器
- 弹性布局
定位
绝对定位
position:absolute;
left,right,top,bottom //坐标，只有定位才有
绝对定位完全脱离文档流，元素变为行内块 //父元素会塌陷，必须设高度
谁定位，从谁开始脱离文档流，默认坐标在原来文档流的位置(位置不变),影响兄弟元素
定位坐标后以坐标为准(如果所有父元素都没有定位，则以body为准，否则 以其中某一个有定位的父元素为准)
相对定位
position:relative;
left,right,top,bottom //坐标，只有定位才有
相对定位不脱离文档流，不会变为行内块
以自身原本正常文档流的坐标作为参考
一般安照子绝父相
固定定位
position:fixed;
left,right,top,bottom //坐标，只有定位才有
固定定位会脱离正常文档流，会变成行内块
以可视窗口作为参考
粘性定位
position:sticky;
不会脱离文档流
.notice{
height:50px;
background:black;
top:50px; //滑动到距离上面50px时定位
}
继承定位
position:
没有定位
position:static; //取消定位
postiton:unset; //没有定位
position:static; //静态
层级
定位后的元素才有层级，默认都为0
- 谁有定位，谁的层级高
- 谁后定位，谁层级高
- 设定层级 z-index:1; //取值范围 -1——9999
元素隐藏
overflow:hidden; 子元素溢出隐藏 不占位
overflow:visible; 元素溢出可见
display:none; //隐藏自身 不占位
display:block; //元素显示为block
visibility:hidden; //元素自身可见状态隐藏,要占位
visibility:visible; //自身状态可见
opacity:0; //元素自身透明度，1为全显示，0为全透明，要占位
filter:alpha(opacity=50); 滤镜，只适用于IE
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
