css三大特性之优先级
- 优先级是解决样式冲突的一种能力,优先级高的执行,优先级低的不执行,权重高的优先执行
- 优先级公式
- 继承<通配符选择器<标签选择器<类选择器< ID选择器<行内样式<!important
- 0 0 0,0,0,1 0,0,1,0 0,1,0,0 1,0,0,0 无穷大
1、 !important写在属性值的后面，分号的前面
2、 !important不能提升继承的优先级，只要是继承，优先级最低！！
盒子模型的组成
- 内容区域 : 放内容和子元素的区域(默认是盒子的宽高)
- 边框
- 四条边框相同的连写 border:10px soild red
- 单边框连写: border-top border-bottom border-left border-right
- border-width 边框粗细
- border-style 边框样式
- 实线 soild
- 虚线 dashed
- 点线 dotted
- border-color 颜色取值
- 内边距 内容区域距边框的距离
- 单个内边距: padding-top padding-bottom padding-left padding-right
- 内边距连写
- padding:40px 上下左右内边距都是40px
- padding:10px 20px 第一个值是上下内边距 第二个值代表左右内边距20px
- padding: 20px 50px 100px 写三个值,第一个代表上下内边距,第二个值代表左右内边距,第三个代表下内边距
- padding: 20px 50px 100px 10px 写4个,代表上右下左 顺时针
- 外边距：margin : 控制边框以外盒子与盒子之间的距离
- 一个值 margin:10px 上右下左都设置10px
- 两个值 margin: 10px 20px 上下设置为10px,左右设置为20px
- 三个值 margin: 10px 20px 30px 上设置为10px , 左右设置为20px,下设置为30px
- 四个值 margin : 10px 20px 30px 40px 上设置为10px,右设置为20px, 下设置为30px,左设置为40px
- margin外边距折叠现象
margin的合并现象
垂直布局的盒子，此时上下的margin会合并,两者的距离为margin的最大值margin的塌陷现象
互相嵌套的块级元素，父子元素的margin-top会被合并作用在父元素上,导致父元素一起往下移动（塌陷）
解决方法:
1. 给父元素设置一个border-top或者padding-top ,分隔父子元素的margin-top
2. 给父元素设置overflow：hidden
3. 转换成行内块元素
4. 设置浮动
清除默认内外边距 margin:0; padding:0 清除默认内外边距 margin:0; padding:0;单方向设置
只给盒子的某个方向单独设置外边距
属性名:margin-方位名词 属性值:数字+px;
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
盒子的大小和计算
- 盒子被内边距和边框撑大了,
盒子的最终宽度= 内容区域的宽度+左右边框+左右内边框 - 盒子的最终高度=内容区域的高度+上下边框+上下内边距
如果不希望盒子被撑大,从内容区域的宽高,减去撑大的部分.
PxCook的基本使用
- 通过软件打开设计图
① 打开软件 ② 拖拽入设计图 ③ 新建项目 (选择本地项目) - 常用快捷键
- 放大设计图：ctrl + +
- 缩小设计图：ctrl + -
- 移动设计图：空格按住不放，鼠标拖动,进行设计
- 常用工具
- 量尺寸
- 吸颜色
- 从psd文件中直接获取数据
- 切换到开发界面，直接点击获取数据
CSS3盒模型（自动内减）
- 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成
给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大
解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
若有收获，就点个赞吧
0 人点赞
