CSS

一,盒子模型:

1,border:

(1 border-width: 5px;

(2 border-style: solid;实线

dotted : 点线。dashed : 虚线。
solid : 实线边框

(3 border-color: aqua;

简写:border:5px,solid,pink;不分顺序

(4,表格细线边框: border-collapse: collapase

(5,边框会影响盒子实际大小

2,内边距padding:

padding-top/bottom/left/right:

简写:

注意:

如果 盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小

3,外边距margin:

margin-left/right/top/bottom:

margin的简写与padding一样

典型应用:让块级盒子水平居中,但必须满足2个条件:

(1,盒子必须指定了宽度width

(2,盒子左右的外边距都设置为auto margin:0 auto;

外边距合并:

(1,

(2,

3,清除内外边距:

不同浏览器的默认内外边距不同

二,PS基本操作:

三,圆角边框(重点)

四,盒子阴影(重点)

五,文字阴影

六,CSS浮动:

1,传统网页布局

2,为什么需要浮动

3,什么是浮动?

4,浮动特性(重难点!!!)

(1,浮动元素会脱离标准流(脱标)

(2,浮动元素会一行内显示并且元素顶部对齐

一行内装不下会自动换行

浮动的元素之间不会有缝隙

(3,浮动元素会具有行内块元素的特性(重难点)

5,浮动元素经常和标准流父级搭配使用

6,浮动的两个注意事项:

7,清除浮动:

(1,为什么需要清除浮动?

(2,清除浮动的本质

(3,语法:

选择器 {clear:属性值;}

属性值:left(不允许左侧有浮动元素,清除左侧浮动的影响),right,both

实际工作中,几乎只用clear:both;

清除浮动的策略是:闭合浮动,只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子

8,清除浮动的方法:

(1,额外标签法即隔墙法,W3C推荐的做法

(2,父级添加overflow属性

(3,父级添加after属性

.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 为 IE6、IE7浏览器设置的清除浮动 */
*zoom: 1;
}

(4,父级添加双伪元素

相关推荐
拾年27514 分钟前
React Hooks 进阶篇:useMemo / useCallback / useReducer / useImperativeHandle,用「算账 +
前端·javascript·react.js
Jackson__21 分钟前
面试官:如何在老项目中使用新框架,并实现通信?
前端·javascript·面试
拾年27523 分钟前
React Hooks 保姆级教程:把组件想象成失忆的打工人,4 个 Hook 带你原地起飞
前端·javascript·react.js
mmsx30 分钟前
一个 Bug 修了 12 轮,根因只有一句话:AI 编程时代,日志才是唯一的真相
前端
默_笙31 分钟前
😝 5 亿次循环卡死页面?我用 Web Worker 把它扔进后台线程,页面丝滑如初
前端·javascript
CAD老兵33 分钟前
一行代码集成 DWG/DXF 图纸查看:测量批注,数据不出站
前端·javascript·github
小林ixn34 分钟前
单例模式:从弹窗管理到全局状态,一个模式搞定
前端·javascript·设计模式
AI编程实验室35 分钟前
Node.js Agent Handoff 仓库扫描 MVP:忽略规则、include 通配与稳定输出实现
前端·ai编程
猫不易35 分钟前
从 Virtual DOM 到 Vapor:Vue 3.6 的另一条路
前端·vue.js
光影少年42 分钟前
react navite性能优化 & 常见坑
前端·react native·掘金·金石计划