德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流(https://www.wxclwl.com)
日期:2023/03/25 18:22作者:张虹伦人气:
第01阶段.前端基础.盒子模型
css学习三大重点: css 盒子模型 、 浮动 、 定位
主题思路:
目标:
理解:能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用:能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例网页布局中,我们是如何把里面的文字,图片,按照美工给我们的效果图排列的整齐有序呢?
看透网页布局的本质:首先利用CSS设置好盒子的大小,然后摆放盒子的位置。最后把网页元素比如文字图片等等,放入盒子里面。以上两步 就是网页布局的本质我们明白了,盒子是网页布局的关键点,所以我们更应该弄明白 这个盒子有什么特点。
标准盒子模型
属性
作用
border-width
定义边框粗细,单位是px
border-style
边框的样式
border-color
边框颜色
例如:
border: 1px solid red; 没有顺序很多情况下,我们不需要指定4个边框,我们是可以单独给4个边框分别指定的。
上边框
下边框
左边框
右边框
border-top-style:样式;
border-bottom-style:样式;
border-left-style:样式;
border-right-style:样式;
border-top-width:宽度;
border- bottom-width:宽度;
border-left-width:宽度;
border-right-width:宽度;
border-top-color:颜色;
border- bottom-color:颜色;
border-left-color:颜色;
border-right-color:颜色;
border-top:宽度 样式 颜色;
border-bottom:宽度 样式 颜色;
border-left:宽度 样式 颜色;
border-right:宽度 样式 颜色;
padding属性用于设置内边距。 是指 边框与内容之间的距离。
属性
作用
padding-left
左内边距
padding-right
右内边距
padding-top
上内边距
padding-bottom
下内边距
当我们给盒子指定padding值之后, 发生了2件事情:
内容和边框 有了距离,添加了内边距。盒子会变大了。注意: 后面跟几个数值表示的意思是不一样的。
我们分开写有点麻烦,我们可以不可以简写呢?
值的个数
表达意思
1个值
padding:上下左右内边距;
2个值
padding: 上下内边距 左右内边距 ;
3个值
padding:上内边距 左右内边距 下内边距;
4个值
padding: 上内边距 右内边距 下内边距 左内边距 ;
新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding ,撑开盒子的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>新浪导航栏案例</title> <style> /*清除元素默认的内外边距*/ * { margin: 0; padding: 0; } .nav { height: 41px; background-color: #FCFCFC; /*上边框*/ border-top: 3px solid #FF8500; /*下边框*/ border-bottom: 1px solid #EDEEF0; } .nav a { /*转换为行内块*/ display: inline-block; height: 41px; line-height: 41px; color: #4C4C4C; /*代表 上下是 0 左右是 20 内边距*/ padding: 0 20px; /*background-color: pink;*/ text-decoration: none; font-size: 12px; } .nav a:hover { background-color: #eee; } </style> </head> <body> <div class="nav"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> <a href="#">博客</a> <a href="#">微博</a> <a href="#">关注我</a> </div> </body> </html>如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。
margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离
属性
作用
margin-left
左外边距
margin-right
右外边距
margin-top
上外边距
margin-bottom
下外边距
margin值的简写 (复合写法)代表意思 跟 padding 完全相同。
实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}常见的写法,以下下三种都可以。
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;为了更灵活方便地控制网页中的元素,制作网页时,我们需要将元素的默认内外边距清除
代码:
* { padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ }注意:
行内元素为了照顾兼容性, 尽量只设置左右内外边距, 不要设置上下内外边距。使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。
解决方案:尽量给只给一个盒子添加margin值。
解决方案:
可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。还有其他方法,比如浮动、固定、绝对定位的盒子不会有问题,后面咱们再总结。。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father { width: 500px; height: 500px; background-color: pink; /*嵌套关系 垂直外边距合并 解决方案 */ /*1. 可以为父元素定义上边框 transparent 透明*/ /*border-top: 1px solid transparent;*/ /*2. 可以给父级指定一个 上 padding值*/ /*padding-top: 1px; */ /*3. 可以为父元素添加overflow:hidden。*/ overflow: hidden; } .son { width: 200px; height: 200px; background-color: purple; margin-top: 100px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>我们根据稳定性来分,建议如下:
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。
width > padding > margin 原因:margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。padding 会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。width 没有问题我们经常使用宽度剩余法 高度剩余法来做。因为网页美工大部分效果图都是利用ps 来做的,所以,以后我们大部分切图工作都是在ps里面完成。
文件--打开 -- 可以打开 我们要测量的图片ctrl+r 可以打开标尺 或者 视图 -- 标尺右击标尺, 把里面的单位改为 像素ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图按住空格键, 鼠标可以 变成小手 ,拖动 ps 视图用选区 拖动 可以 测量 大小ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看,所以,我们一般上来就直接去掉这些列表样式就行了。 代码如下
li { list-style: none; }以下我们讲的CSS3部分新属性, 但是我们遵循的原则是,以下内容,不会影响我们页面布局, 只是样式更好看了而已。
开始就形成良好的书写规范,是你专业的开始。
【强制】 选择器 与 { 之间必须包含空格。
示例:
.selector { }【强制】 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
示例:
font-size: 12px;【强制】 并集选择器,每个选择器声明必须独占一行。
示例:
/* good */ .post, .page, .comment { line-height: 1.5; } /* bad */ .post, .page, .comment { line-height: 1.5; }【建议】 一般情况情况下,选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确。
示例:
/* good */ #username input {} .comment .avatar {} /* bad */ .page .header .login input {} .comment div * {}【强制】 属性定义必须另起一行。
示例:
/* good */ .selector { margin: 0; padding: 0; } /* bad */ .selector { margin: 0; padding: 0; }【强制】 属性定义后必须以分号结尾。
示例:
/* good */ .selector { margin: 0; } /* bad */ .selector { margin: 0 }