【web前端】CSS盒子模型

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

使用课程是黑马程序员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值挤开）

 代码如下：

    
    
    
    
    



    

        新浪导航
        手机新浪网
        移动客户端
        微博
        三个字
    

7、案例-小米侧边栏

 代码如下：

    
    
    
    
    



    手机 电话卡
    电视 盒子
    笔记本 平板
    出行 穿戴
    智能 路由器
    健康 儿童
    耳机 音响

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可以取消选区，或者在旁边空白处点击一下也可以取消选区

 

综合案例

 

 代码如下：

    
    
    
    
    



    

        
        
快递牛，整体不错蓝牙可以说秒连。红米给力
        
来自于 117384232 的评价
        

            Redmi AirDots真无线蓝...
            |
            99.9元
        
    

 疑问解答

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

持续更新......