做英文兼职的网站,深圳网站建设ppchsj,设计方案,怎么做网站的二维码CSS的盒子模型
一、学习目标
能够认识不同选择器的优先级公式能够进行CSS权重叠加计算#xff0c;分析并解决CSS 冲突问题能够认识盒子模型的组成部分能够掌握盒子模型的边框、内边距、外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象#xff0c;并知…CSS的盒子模型
一、学习目标
能够认识不同选择器的优先级公式能够进行CSS权重叠加计算分析并解决CSS 冲突问题能够认识盒子模型的组成部分能够掌握盒子模型的边框、内边距、外边距的作用及简写形式能够计算盒子的实际大小能够了解外边距折叠现象并知道如何解决盒子塌陷问题
二、文章内容
2.1 CSS三大特性
目标能认识不同选择器的优先级公式能够进行CSS权重叠加计算分析并解决CSS 冲突问题
2.1.1 优先级
特性不同选择器具有不同的优先级优先级高的选择器样式会覆盖优先级低选择器样式 优先级的公式继承 通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important 注意点
!important写在属性值的后面分号的前面!important不能提升继承的优先级只要是继承优先级最低实际开发过程中不建议使用!important
2.1.2 权重叠加计算公式 场景如果是复合选择器此时需要通过权重叠加计算方法判断最终哪个选择器优先级最高会生 效 权重叠加计算公式每一级之间不存在进位 比较规则 先比较第一级数字如果比较出来了之后的统统不看如果第一级数字相同此时再去比较第二级数字如果比较出来了之后的统统不看……如果最终所有数字都相同表示优先级相同则比较层叠性谁写在下面谁说了算! 注意点!important如果不是继承则权重最高天下第一
2.1.3 权重叠加计算案例
权重计算题的解题步骤 先判断选择器是否能直接选中标签如果不能直接选中 → 是继承优先级最低 → 直接pass通过权重计算公式判断谁权重最高 注意点实际开发中选择标签需要精准尽量避免多个选择器同时选中一个标签的情况不要自己难为自己
2.2 Chrome调试工具查错流程
遇到样式出不来要学会通过调试工具找错
2.3 PxCook的基本使用
目标能够使用 PxCook 工具测量设计图的尺寸和颜色能够从psd文件中直接获取数据
通过软件打开设计图 ① 打开软件 ② 拖拽入设计图 ③ 新建项目常用快捷键 放大设计图ctrl 缩小设计图ctrl - 移动设计图空格按住不放鼠标拖动常用工具 (量尺寸、吸颜色从psd文件中直接获取数据 切换到开发界面直接点击获取数据
2.4 盒子模型
目标能够认识盒子模型的组成能够掌握盒子模型边框、内边距、外边距的设置方法
2.4.1 盒子模型的介绍
盒子的概念 页面中的每一个标签都可看做是一个“盒子”通过盒子的视角更方便的进行布局 浏览器在渲染显示网页时会将网页中的元素看做是一个个的矩形区域我们也形象的称 之为盒子盒子模型 CSS 中规定每个盒子分别由 内容区域content、内边距区域padding、边框区域border、外边距区域margin 构成这就是盒子模型记忆可以联想现实中的包装盒
2.4.2 内容的宽度和高度
作用利用 width 和 height 属性默认设置是盒子 内容区域 的大小属性width / height常见取值数字 px
2.4.3 边框border 边框border- 单个属性 作用设置边框粗细、边框样式、边框颜色效果单个属性 边框border- 连写形式 属性名border属性值单个取值的连写取值之间以空格隔开 如border : 10px solid red;快捷键bd tab 边框border- 单方向设置 场景只给盒子的某个方向单独设置边框属性名border-方位名词方位名词top right bottom left属性值连写的取值 盒子实际大小初级计算公式 注意点 ① 设置width和height是内容的宽高 ② 设置border会撑大盒子 盒子实际大小初级计算公式 盒子宽度 左边框 内容高度 右边框盒子高度 上边框 内容高度 下边框 当盒子被border撑大后如何满足需求 解决1计算多余大小手动在内容中减去手动内减解决2设置box-sizing: border-box;即可 边框的应用 border可以实现有样式的分割线 div classline/divstyle.line {width: 500px;border-top: 1px solid blue;}/styleborder 可以实现各种箭头例如实现向下的箭头
div classarrow/div
style
.arrow {
/* 内容宽高为0只显示边框 */
width: 0px;
height: 0px;
box-sizing: content-box;
border: 15px solid;
/* 只有上边框显示颜色其他三个方向透明形成向下的箭头 */
border-color: black transparent transparent transparent;
}
/style2.4.4 内边距padding
内边距padding- 取值 作用设置边框与内容区域之间的属性名padding常见取值 记忆规则先从上开始赋值然后顺时针赋值如果没有赋值的看对面的 内边距padding- 单方向
场景只给盒子的某个方向单独设置内边距属性名padding-方位名词方位名词top right bottom left属性值数字 px
盒子实际大小终极计算公式 注意点 ① 设置width和height是内容的宽高 ② 设置border会撑大盒子 ③ 设置padding会撑大盒子盒子实际大小终极计算公式 盒子宽度 左边框 左padding 内容宽度 右padding 右边框盒子高度 上边框 上padding 内容宽度 下padding 下边框
解决当盒子被border和padding撑大后如何满足需求 解决1自己计算多余大小手动在内容中减去手动内减 解决2设置box-sizing: border-box;即可
不会撑大盒子的特殊情况块级元素 ① 如果盒子没有设置宽度此时宽度默认是父元素的宽度 ② 此时给盒子设置左右的padding或者左右的border此时不会撑大盒子CSS3盒模型自动内减 需求给盒子设置border或padding时盒子会被撑大如果不想盒子被撑大解决方法 ① 手动内减 操作自己计算多余大小手动在内容中减去缺点项目中计算量太大很麻烦 解决方法 ② 自动内减 操作给盒子设置属性 box-sizing : border-box优点浏览器会自动计算多余大小自动在内容中减去
2.4.5 外边距margin 外边距margin- 取值 作用设置边框以外盒子与盒子之间的距离属性名margin常见取值 记忆规则先从上开始赋值然后顺时针赋值如果没有赋值的看对面的 外边距margin- 单方向设置 场景只给盒子的某个方向单独设置外边距属性名margin - 方位名词属性值数字 px margin单方向设置的应用 清除默认内外边距 场景浏览器会默认给部分标签设置默认的margin和padding但一般在项目开始前需要先清除这些标签默认的margin和padding后续自己设置 比如body标签默认有margin8px比如p标签默认有上下的margin比如ul标签默认由上下的margin和padding-left…… 解决方法
/* 淘宝代码 */
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3,
h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul
{
margin: 0;
padding: 0;
}
/* 京东代码 */
* {
margin: 0;
padding: 0;
}外边距正常情况 场景水平布局的盒子左右的margin正常互不影响结果最终两者距离为左右margin的和 外边距折叠现象 – ① 合并现象 场景垂直布局的块级元素上下的margin会合并结果最终两者距离为margin的最大值解决方法避免就好只给其中一个盒子设置margin即可 外边距折叠现象 – ② 塌陷现象 场景互相嵌套的块级元素子元素的margin-top会作用在父元素上结果导致父元素一起往下移动解决方法 给父元素设置border-top 或者 padding-top分隔父子元素的margin-top给父元素设置overflowhidden转换成行内块元素设置浮动 行内元素的margin和padding无效的情况 场景给行内元素设置margin和padding时结果 水平方向的margin和padding布局有效垂直方向的margin和padding布局无效
2.4.6 box-sizing属性
box-sizing属性决定了盒子的计算方式取值如下
content-box默认取值 此时width和height指内容的宽度和高度border和padding不计入width和height之内 盒子的总宽度 width padding border margin 盒子的总高度 height padding border marginpadding-box 此时width和height包含内容和padding 盒子的总宽度 width border margin 盒子的总高度 width border marginborder-box开发中经常用到 此时width和height包含内容和padding、border 盒子的总宽度 width margin 盒子的总高度 width margin
三、综合案例
3.1 综合案例新浪导航
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 清除标签默认的margin和padding */* {margin: 0;padding: 0;}.box {height: 40px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;}.box a {display: inline-block;/* width: 80px; */height: 40px;/* 通过内边距设置边框与内容的间距 */padding: 0 20px;color: #4c4c4c;text-decoration: none;text-align: center;line-height: 40px;font-size: 12px;}.box a:hover {background-color: #edeef0;color: #ff8400;}/style
/head
bodydiv classboxa href#新浪导航/aa href#新浪导航新浪导航/aa href#新浪导航/aa href#新浪导航/a/div
/body
/html3.2 综合案例网页新闻列表案例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 清除标签默认的margin和padding */* {margin: 0;padding: 0;}body {/* 去除行高带来的默认间隙完成精准布局 */line-height: 1;}.box {width: 500px;height: 400px;/* background-color: pink; */border: 1px solid #ccc;padding: 41px 30px 0;/* 自动内减 */box-sizing: border-box;}.box h2 {height: 41px;/* background-color: pink; */border-bottom: 1px solid #ccc;/* 自动内减 */box-sizing: border-box;font-size: 30px;}.box ul {list-style: none;}.box ul li {height: 50px;padding-left: 30px;border-bottom: 1px dashed #ccc;line-height: 50px;}.box li a {text-decoration: none;font-size: 18px;color: #666;}/style
/head
bodydiv classboxh2最新文章/New Articles/h2ullia href#北京招聘网页设计平面设计php/a/lilia href#体验javascript的魅力/a/lilia href#jquery世界来临/a/lilia href#网页设计师的梦想/a/lilia href#jquery中的链式编程是什么/a/li/ul/div
/body
/html
