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