css盒子模型(布局)

一、水平布局

 水平方向有七个值
margin-left+border-left+padding-left+width+padding-right +border-right+ margin-right
   浏览器规定:
   水平方向的七个值相加必须等于其父元素内容区的宽度,如果不等于,
   那么浏览器就会自动调整七个值中的某值,让其成立,这就叫过度约束
10+10+20+100+20+10+10  ==600   ??

   如何调整:
     1、七个值中如果没有auto,那么浏览器默认调整的是margin-right
     10+10+20+100+20+10+ 430 ==600 
     2、七个值中如果有auto,则浏览器就会调整auto
       可以设置auto大小的属性,是margin-left  width  margin-right  
       (1)1个auto,谁是auto,浏览器就调整谁
      (2)2个auto
          margin-left  width auto   margin-right固定值  调整width
          width  margin-right  auto   margin-left固定值  调整width
          margin-left  margin-right  auto   width 固定值  左右外边距平分,盒子会居中显示
      (3)3个auto
      margin-left  width  margin-right  调整width  

      总结:
        浏览器调整
           width>margin

 

 二、垂直布局

 子元素是在父元素的内容区中排列的
        如果子元素的大小超过了父元素,则子元素会从父元素中溢出
        使用 overflow 属性设置父元素如何处理溢出的子元素
            可选值:
               visible  默认值  子元素会从父元素中溢出,在父元素外部的位置显示
               hidden   溢出的内容将会被 裁剪 不会显示
               scroll   生成两个滚动条,通过滚动条来查看完整的内容
               auto     根据需要生成滚动条
               
         额外两个属性,了解一下   
         overflow-x  单独设置水平方向的溢出内容
         overflow-y  单独设置垂方向的溢出内容

三、盒子大小

 

 默认情况下:盒子可见宽的大小由内容区,内边距,边框共同决定
   box-sizing  用来设置盒子尺寸的计算方式 width/height 指的是谁
   可选值:
                  content-box 内容区 默认值
                  border-box  宽度和高度用来设置整个盒子可见框的大小,包括边框,padding,内容区

 四、阴影和圆角

阴影: box-shadow 
             用来设置元素的阴影效果,不会影响到页面布局 
                第一个值:水平偏移量  正->左  负->右
                第二个值:垂直偏移量  正->下  负->上
                第三个值:模糊半径
                第四个值:颜色    默认是黑色

 圆角: border-radius 用来设置圆角  以10px为半径画圆
             borde-top-right-radius
             border-top-left-radius
             border-bottom-left-radius
             border-bottom-right-radius
             border-radius: 50%;

### 关于CSS盒子模型布局的实际案例 #### CSS盒子模型概述 CSS盒子模型是网页布局的核心概念之一,它定义了HTML元素如何占据空间以及与其他元素的关系。每个HTML元素都被视为一个矩形盒子,该盒子由内容区域(content)、内边距(padding)、边框(border)和外边距(margin)组成[^2]。 以下是几个实际的CSS盒子模型布局示例: --- #### 示例1:简单的两栏布局 这是一个经典的两栏布局例子,展示了如何使用`float`属性来创建并排排列的两个列。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Two Column Layout</title> <style> .container { width: 100%; overflow: hidden; } .left, .right { float: left; padding: 10px; border: 1px solid black; } .left { width: 70%; /* 左侧宽度 */ } .right { width: 29%; /* 右侧宽度 */ margin-left: 1%; /* 防止溢出 */ } </style> </head> <body> <div class="container"> <div class="left">左侧内容</div> <div class="right">右侧内容</div> </div> </body> </html> ``` 此代码片段展示了一个基本的两栏布局,其中`.left`和`.right`类分别代表左栏和右栏。通过设置不同的宽度和浮动方向,实现了水平排列的效果[^4]。 --- #### 示例2:Flexbox实现响应式卡片布局 现代Web开发中,Flexbox是一种更灵活的方式用于构建复杂的布局结构。下面是一个基于Flexbox的响应式卡片布局实例。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Card Layout with Flexbox</title> <style> .card-container { display: flex; justify-content: space-around; flex-wrap: wrap; } .card { box-sizing: border-box; width: calc(33% - 20px); /* 自适应三列布局 */ margin: 10px; padding: 20px; border: 1px solid gray; background-color: lightblue; } </style> </head> <body> <div class="card-container"> <div class="card">卡片1</div> <div class="card">卡片2</div> <div class="card">卡片3</div> <div class="card">卡片4</div> </div> </body> </html> ``` 在这个示例中,`.card-container`被配置为flex容器,而`.card`作为其子项自动按照设定的比例分布。这种技术非常适合动态数量的内容布局。 --- #### 替换元素的应用场景 除了常规的布局需求之外,在某些情况下还需要处理特殊类型的元素——即替换元素(replaced elements),比如图像(`<img>`), iframe嵌入框架(`<iframe>`), 或者视频播放器(`<video>`)等。对于这类对象来说,虽然内部呈现不受外部样式表直接影响,但是仍然可以通过调整它们所在的盒型尺寸参数达到预期视觉效果[^3]。 例如,如果想让图片完全填充父级容器而不失真,则可采用如下方法: ```css img { max-width: 100%; height: auto; } ``` 上述规则确保任何大小的图片都不会超出其容器边界,并保持原始比例不变。 --- ### 总结 以上介绍了几种典型的CSS盒子模型应用场景及其对应的解决方案。无论是传统的浮动法还是现代化的弹性网格体系(Flexbox/Grids),都离不开对基础理论的理解与实践操作相结合的过程。掌握好这些技巧之后便能更加自如地应对各种复杂的设计挑战。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值