zoukankan      html  css  js  c++  java
  • 盒子模型的边框、内边距、外边距、阴影

    1、边框

    1、CSS的三大重点:盒子模型、浮动、定位

    2、 盒子模型:内容、边框、外边距、内边距

    3、  网页布局本质:拼接盒子的过程   div +CSS 

    4、  边框 

    (1)     、边框属性:边框厚度、边框的颜色、边框的线条样式 

    (2)     、边框厚度:border-top-width(上)

    (3)     、边框的颜色: border-top-color: blue;(上)

    (4)     、边框的线条样式:border-top-style: solid;

    ①    、实线 solid

    ②    、虚线  dashed

    ③    、点线 dotted

    ④    、双实线 double

    (5)     、综合设置:border:1px solid red;

    (6)     、边框会影响盒子的尺寸

    2、内边距

    1、定义:内边距:盒子中内容与边框之间的距离

    2、用法:

    (1)     、上内边距  padding-top: 20px;

    (2)     、左内边距 padding-left: 15px;

    (3)     、下内边距  padding-bottom: 25px;

    (4)     、右内边距  padding-right: 10px;

    (5)     、属性值个数不同

    ①     四个属性值 :上、右、下、左   padding: 50px 40px 30px 10px;

    ②       三个属性值: 上、左右、下  padding: 50px 40px 30px;

    ③         两个属性值: 上下、左右 padding: 50px 20px;

    ④           一个属性值: 上下左右 padding: 50px;

    3、外边距

    1、定义:盒子的边框与其他元素或者浏览器边缘之间的距离

    2、使用:

    ①     上外边距  margin-top: 100px;

    ②     左外边距 margin-left: 80px;

    ③     下外边距 margin-bottom: 50px;

    ④      右外边距 margin-right: 200px;

    3、综合设置

    (1)      四个属性值:上 右 下 左  margin: 90px 70px 50px 20px;

    (2)       三个值:上、左右、下margin: 90px 70px 20px;

    (3)       两个值:上下、左右margin: 90px 50px;

    (4)       一个值:上下左右 margin: 50px;

    4、总结:

    (1)     div盒子默认有8px的外边距(只值距离浏览器的

    (2)     盒子的外边距不会影响盒子的尺寸

    5、水平居中

    (1)     text-align:center:内容水平居中,可以让行内元素和行内块元素水平居中,不可以让块状元素居中

    (2)     margin:auto:块状元素水平居中,必须设置宽度

    4、外边距合并

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

    ①    定义:当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者 ,这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

    2、嵌套关系的块元素的外边距合并

    ①    定义:对于两个嵌套关系的块元素,如果父元素没有上内边距及边框, 则父元素的上外边距会与子元素的上外边距发生合并, 合并后的外边距为两者中的较大者

    3、避免嵌套关系外边距合并的方法

    ①    给父元素添加边框

    ②    给父元素添加内边距

    ③    给父元素添加overflow属性

    5、盒子阴影

    1、定义:向div元素添加影子

    2、使用:四个属性值 水平阴影 垂直阴影 影子模糊距离 影子的颜色

    box-shadow: 60px 30px 10px #ff0000;

  • 相关阅读:
    poj 3321 Apple Tree
    hdu 1520 Anniversary party
    Light OJ 1089 Points in Segments (II)
    Timus 1018 Binary Apple Tree
    zoj 3299 Fall the Brick
    HFUT 1287 法默尔的农场
    Codeforces 159C String Manipulation 1.0
    GraphQL + React Apollo + React Hook 大型项目实战(32 个视频)
    使用 TypeScript & mocha & chai 写测试代码实战(17 个视频)
    GraphQL + React Apollo + React Hook + Express + Mongodb 大型前后端分离项目实战之后端(19 个视频)
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13512878.html
Copyright © 2011-2022 走看看