居然隔了一个星期了，啊我到底在干嘛。

使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

框架

一、盒子模型

1、盒子模型组成

2、边框

3、表格的细线边框

4、边框会影响盒子的实际大小

5、内边距

6、案例-新浪导航栏

7、案例-小米侧边栏

8、外边距

9、外边距典型应用

10、外边距合并

11、清除内外边距

二、PS基本操作

综合案例

编辑

疑问解答

三、圆角边框

1、语法和原理

2、常用写法

四、盒子阴影

五、文字阴影

框架

一、盒子模型

1、盒子模型组成

2、边框

border-style：solid-实线边框，dashed-虚线边框，dotted-点线边框

3、表格的细线边框

4、边框会影响盒子的实际大小

5、内边距

当我们给盒子指定padding值之后，发生了2件事情:

1.内容和边框有了距离，添加了内边距。
2.padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

6、案例-新浪导航栏

（高设置，宽用左右padding值挤开）

代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新浪导航栏</title><style>.box {height: 41px;border-top: #ff8500 3px solid;background-color: #fcfcfc;border-bottom: #edeef0 1px solid;line-height: 41px;}.box a {height: 41px;text-decoration: none;display: inline-block;color: black;padding: 0px 20px;font-size: 12px;}.box a:hover {color: orange;background-color: gainsboro;}</style>
</head><body><div class="box"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
</body></html>

7、案例-小米侧边栏

代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米侧边栏修改</title><style>a {background-color: #55585a;display: block;height: 40px;width: 220px;line-height: 40px;padding-left: 30px;text-decoration: none;color: white;font-size: 14px;}a:hover {background-color: #ff6700;}</style>
</head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body></html>

8、外边距

9、外边距典型应用

外边距可以让块级盒子水平居中，但是必须茜足两个条件:

①盒子必须指定了宽度(width )。
②盒子左右的外边距都设置为auto 。

. header{ width: 960px; margin: 0 auto; }

常见的写法，以下三种都可以:
margin-left auto;

margin-right auto;margin: auto;
margin: 0 auto;

注意:

以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center即可。

10、外边距合并

（1）相邻块元素垂直外边距的合并

(2)嵌套块元素垂直外边距的塌陷

11、清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

* {padding:0;/*清除内边距*/margin : 0;/*清除外边距*/}

注意:行内元素为了照预兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

二、PS基本操作

因为网页美工大部分效果图都是利用PS ( Photoshop )来做的，所以以后我们大部分切图工作都是在PS里面完成。

文件→打开:可以打开我们要测量的图片

Ctrl+R:可以打开标尺，或者视图→标尺

右击标尺，把里面的单位改为像素

Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图

按住空格键，鼠标可以变成小手，拖动PS视图

用选区拖动可以测量大小

Ctrl+ D可以取消选区，或者在旁边空白处点击一下也可以取消选区

综合案例

代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例-小米商城</title><style>body {background-color: #f5f5f5;}* {margin: 0;padding: 0;}.box {width: 298px;height: 405px;background-color: #ffffff;margin: 100px auto;}.box img {width: 100%;}.review {font-size: 14px;padding: 0px 20px;margin-top: 25px;}.appraise {margin-top: 50px;color: #bcc0ca;font-size: 10px;padding-left: 22px;}.info {margin-top: 10px;}.info a {font-size: 14px;padding-left: 22px;text-decoration: none;color: #3a3a3a;}.xian {color: #bcc0ca;padding: 0px 5px;}.price {color: #ff7214;}</style>
</head><body><div class="box"><img src="data:images/img.jpg" /><p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p><p class="appraise">来自于 117384232 的评价</p><div class="info"><a href="#">Redmi AirDots真无线蓝...</a><span class="xian">|</span><span class="price">99.9元</span></div></div>
</body></html>

疑问解答

1.布局为啥用不同盒子,我只想用div ?
标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p。

2.为啥用辣么多类名?
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子,选取盒子更容易,后期维护也方便。

3.到底用margin还是padding ?
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。

4.自己做没有思路?
布局有很多种实现方式，同学们可以开始先模仿pink老师的写法，然后再做出自己的风格。最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等。

如何去掉无序列表前面得项目符号（小圆点）

 list-style: none;

三、圆角边框

1、语法和原理

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
语法︰
border-radius : length;

radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果

2、常用写法

（1）圆形做法

border-radius: 50%;

或者

border-radius: (正方形边长的一半);

（2）其他情况

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%

如果是个矩形,设置为高度的一半就可以做

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

分开写 : border-top-left-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius，也可以只写两个值，对角相同

四、盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。
语法∶

box-shadow: h-shadow v-shadow blur spread color inset;

注意:
1、默认的是外阴影(outset),但是不可以写这个单词,否则导致阴影无效

2、盒子阴影不占用空间，不会影响其他盒子排列。

五、文字阴影

了解即可

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。

语法︰

text-shadow : h-shadow v-shadow blur color;

Day5

持续更新......

【web前端】CSS盒子模型相关推荐

咸鱼前端—CSS盒子模型
咸鱼前端-CSS盒子模型盒子模型盒子边框(border) 圆角边框(CSS3) 内边距(padding) 外边距(margin) 盒子阴影盒子模型所谓盒子模型就是把HTML页面中的元素看作是一 ...
【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录前言什么是盒子模型盒子的组成盒子的大小盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
Web前端基础知识：CSS盒子模型、绝对定位和相对定位
一:CSS盒子模型 CSS盒子模型概念:CSS盒子模型包含了内容(content).内边距(padding).边框(border).外边距(margin).宽度(width).高度(height)几个 ...
前端笔记 | CSS盒子模型
CSS盒子模型一.盒子模型 1.1 网页布局的本质 1.2 盒子模型的组成 1.3 边框border 1.4 内边距padding 1.5 外边距margin 1.6 清除内外边距二.特殊样式 2 ...
Web开发（一）·期末不挂之第五章·CSS盒子模型(盒子模型各属性行级元素和块级元素导航栏的实现)
CSS盒子模型一.盒子模型二. 块级元素与行级元素✪✪✪ 块级元素行内元素转化三.导航栏的实现一.盒子模型盒子是页面内容的容器,通过盒子的堆叠.嵌套能实现网页布局各属性: 大小(wid ...
前端基础之CSS盒子模型
目录长度单位像素百分比 em rem 颜色单位 RGB RGBA 文档流(normalflow) 盒子模型内容区(content) 边框(border) 内边距(padding) 外边距(ma ...
前端开发面试题—CSS盒子模型
今天分享一下我遇到的一个面试题,是关于CSS盒子模式的问题,简单列举说明一下CSS盒子模型的组成有哪些?
程序媛老张前端Day3———CSS盒子模型
Day4--css盒子模型网页中的布局可以看成事一个一个盒子组成,排在网页中. 属性: 宽度:width:px.%.auto(%是该元素相对于父级盒子宽度的%) 高度:height:px.%.aut ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...

【web前端】CSS盒子模型

框架

一、盒子模型

1、盒子模型组成

2、边框

3、表格的细线边框

4、边框会影响盒子的实际大小

5、内边距

6、案例-新浪导航栏

7、案例-小米侧边栏

8、外边距

9、外边距典型应用

10、外边距合并

11、清除内外边距

二、PS基本操作

综合案例

疑问解答

三、圆角边框

1、语法和原理

2、常用写法

四、盒子阴影

五、文字阴影

【web前端】CSS盒子模型相关推荐

最新文章

热门文章