一、CSS盒子模型
注意:
- 背景色填充到margin以内的区域 (不包括margin区域)
- 文字在content区域添加。
- padding不能为负数,而margin可以为负数。
box-sizing:
- 允许以特定的方式定义匹配某个区域的特定元素。取值为content-box | border-box。
盒子模型的一些问题:
- margin叠加问题,出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
- margin传递问题,出现在嵌套的结构中,只是针对margin-top的问题。
#box{
width:200px; height:200px; background:red; border:10px blue solid;
padding : 30px 50px;
box-sizing: border-box;
}
input{ width:100%; padding:30px; box-sizing: border-box;}
二、标签分类
按类型:
- block : 块
- inline : 内联
- inline-block : 内联块
按内容:
- Flow:流内容
- Metadata:元数据
- Sectioning:分区
- Heading:标题
- Phrasing:措辞
- Embedded:嵌入的
- Interactive:互动的
按显示:
- 替换元素 :浏览器根据元素的标签和属性,来决定元素的具体显示内容。
- 非替换元素 : 将内容直接告诉浏览器,将其显示出来。
三、显示框类型
display:
- block
- inline
- inline-block
- none
区别:
- display:none 不占空间的隐藏
- visibility: hidden 占空间的隐藏
#box1,#box2{ width:100px; height:100px; background:red;}
#box1{ visibility: hidden;}
四、标签嵌套规范
块能够嵌套内联
<div>
<span></span>
<a href="#"></a>
</div>
块嵌套块
<div>
<div></div>
</div>
错误的写法:
<p>
<div></div>
</p>
内联不能嵌套块
错误的写法:
<span>
<div></div>
</span>
正确的写法:
<a href="#">
<div></div>
</a>
五、溢出隐藏
overflow :
- visible : 默认
- hidden
- scroll
- auto
- x轴、y轴(overflow-x、overflow-y针对两个轴分别设置)
div{ width:300px; height:200px; border:1px black solid; overflow-y: auto; overflow-x: scroll;}
六、透明度与手势
opacity : 0(透明) ~ 1(不透明)
- 占空间、所有的子内容也会透明
rgba() : 0 ~ 1
- 可以让指定的样式透明,而不影响其他样式
cursor : 手势
- default:默认
- 自定义鼠标样式:cursor : url(./img/cursor.ico),auto;
#div1{ width:100px; height: 100px; background:red; opacity: 0.5;}
#div2{ width:100px; height: 100px; background:rgba(255,0,0,0.5);
/* cursor:help; */
cursor : url(./img/cursor.ico),auto;
}
七、最大最小宽高
min-width、min-height
max-width、max-height
- %单位:已父容器的大小进行换算
body{ height:500px;}
#box1{ width:200px; height:100%; background:red;}
#box2{ width:100%; height:80%; background:blue;}
八、CSS默认样式
没有默认样式:
- div
- span
有默认样式:
- body
- h1
- p
- ul
css reset :
- *{ margin:0; padding:0;}
- ul{ list-style : none;}
- a{ text-decoration: none; color:#999;}
- img{ dispaly:block}
ul{ list-style: none;}
a{ text-decoration: none; color:#999;}
a:hover{ text-decoration: underline; color:red;}
div{ border:1px black solid;}
img{ display: block;}
九、photoShop切图
png等图片的切图流程:
- 通过矩形选框工具,选择指定的区域
- ctrl + c : 复制图层
- ctrl + n : 新建图层
- ctrl + v : 粘贴图层
- 存储为web格式
psd图片的切图流程:
- 启动生成器
- 图像资源
- 重命名图层,自动获取切图
- 可上传到线上,方便数据获取
十、float浮动
float特性:
- 脱离文档流,延迟父容器靠左或靠右进行排列。
float取值:
- left
- right
- none
body{ border:1px black solid;}
#box1{ width:100px; height:100px; background:yellow; float:right;}
#box2{ width:200px; height:200px; background:red; float:right;}
float注意点:
- 只会影响后面的元素。
- 内容默认提升半层。
- 默认宽根据内容决定。
- 换行排列。
- 主要给块元素添加,但也可以给内联元素添加。
ul{ margin:0; padding:0; list-style: none; width:300px; height:300px; border:1px black solid;}
li{ width:100px; height:100px; background:red; border:1px yellow solid; box-sizing: border-box; float:left;}
li:nth-of-type(1){ height:120px;}
li:nth-of-type(2){ height:80px;}
span:last-of-type{ float:right;}
清除float浮动:
- 固定宽高 : 不推荐 , 不能把高度固定死,不适合做自适应的效果。
- 父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
- overflow : hidden (BFC规范) , 如果有子元素想溢出,那么会受到影响。
- display : inline-block (BFC规范),不推荐,父容器会影响到后面的元素。
- 设置空标签 : 不推荐 , 会多添加一个标签。
- after伪类 : 推荐,是空标签的加强版,目前各大公司的做法。
#box1{ width:200px; border:1px black solid;}
#box2{ width:100px; height:200px; background:red; float:left;}
.clear:after{ content:''; clear:both; display: block;}