review____
文本样式:
word-spacing:设置每个单词之间的空白/单词之间的间距
letter-spacing:字符之间的间距
word-break:换行
word-warp:换行 word-wrap: break-word;
多行文本框textarea warp属性 soft软换行 hard硬换行 off关闭换行
单行文本框<input type="text" name="" id="">
Y轴 overflow:hidden超出父元素隐藏 scroll滚动条显示
width:
height:
max-width:
max-height:
min-width:
min-height:
元素的隐藏和显示:display: none block______ 隐藏空间
visibility:hidden visible ______ 不隐藏空间
列表样式:list
list-style-type:
list-style-position :
list-style-image:url()自定义
line-height: 行高 与 height值 一样
盒子模型:
盒子=content+passing+border+margin
???? 标准盒子/默认盒子:box-sizing:content-box/border-box
width-》content内容区 设置padding整个盒子变大—设置border整个盒子变大—content
边框盒子/怪异盒子:
width-》盒子=content+passing+border 案例:呼吸灯 嵌套
盒子样式:
背景backgroud
-color
-image 引入图片
-repeat 是否重复 是否切割
-clip 当前背景覆盖范围 {border-box padding-box
-origin 设置背景的起始点 content-box }
-position 定位 与origin 配合使用
-size 设置背景图像的大小 100px 100px ;/ 100% 100%
cover(以y轴为基准) contain(以x轴为基准) 等比例拉伸,充满整个父集 推荐正方形
-attachment 将背景图片固定在哪里 scroll 内边距边缘 根据div滚动而滚动 fixed 边框边缘 背景图片没动,动的是div元素
local 固定在自身元素之上
和边框border:
-radius:20px 当前DIV中画一个半径为20的圆 一分为四, 足够大变成圆
border:1px solid red
border -image-source:url() 默认引入边框图片,div四个基点位置
border -image-slice:number:注意:不加单位,默认单位
px:
border -image-repeat:
表格:
table>tr*4>td*4 tr的父亲为 《 tbody》
boder-collapse :collapse 表格边框合并
caption-side:top
重构
框架+布局 造房子+装修
统一 居中 防止分东离西,设置居中 _ magin:0 auto
html4:
body>div#outer 所有代码>#center 居中元素
div*3 cclass=" header"/ center footer
先进行 行级布局 再进行列级布局
html5:
header div*2 header_top <aside> <section>
article footer
————————布局
默认文档流“元素默认所在浏览器中的位置”
从上到下,从左到右
1. display:inline将块级元素转化为行内元素 可以设置宽/高
block:将行内元素转化为块级元素 在一行中显示
inline-block:将当前元素转换为兼具行内和块级特性的元素
2.浮动布局
float:left/right
使用浮动属性不会遮盖文字
对行内元素设置浮动:会让行内元素可以设置宽高属性
对于块级元素设置浮动:独占一行属性失效
浮动合适停止?
1.当遇到父级边框时停止浮动
2.遇到其他浮动元素停止浮动
清除浮动特性:
clear:left/right/both
1.在浮动元素之后添加一个块级元素,给块级元素设置清除浮动
2.给所有浮动元素的父元素设置::after{
content: ''; // 插入空的
clear: left; // 清除浮动
display: block;//转换块级元素
}