盒子模型、float产生的高度塌陷、position

m0_46647163

已于 2022-07-13 13:18:47 修改

阅读量213

点赞数

分类专栏：笔记文章标签： css3 html5 javascript

于 2021-11-26 15:34:40 首次发布

本文链接：https://blog.csdn.net/m0_46647163/article/details/121561105

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、盒子的设置

（一）margin
(二) border
(三) padding
1.当设置padding将盒子撑大时，可box-sizing:border-box,此样式设置后盒子的大小为设置的宽高，此外值为content-box时设置的宽高为内容区的大小。

二、行内元素的盒模型

1.不能设置宽高
2.垂直方向属性的设置不影响整体布局
3.display:inline-block可将元素转换为行内块元素，既可以设置宽高，也不独占一行
block可设置为块元素
此外inline是转为行内元素

三、轮廓、阴影、圆角

1.轮廓
outline不影响大小
2.阴影
box-shadow:0px 0px 50px rgba(0,0)
第一个、第二个参数为偏移量、第三个参数为模糊半径、最后一个为模糊程度
3.圆角
border-radius:50%为圆形

四、高度塌陷和BFC

1.例

<style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 100px;
        }
 </style>
<body>
    <div class="box1" >
        <div class="box2"></div>
    </div>
    
</body>

此时效果：
在这里插入图片描述
高度塌陷为父元素高度不设置时，默认子元素的高度的撑满父元素的高度，
如果子元素设置float:left则子元素会脱离父元素，使父元素发生高度塌陷。

五、position元素定位

（一）relative
1. 以自己原来的位置为参照，设置top left bottom right才能生效
2. 原来的位置保留
（二）absolute
1.相对于祖先元素进行定位
2.如果没有祖先元素或者祖先元素没有定位，则相对于浏览器进行定位
3.只要祖先元素有定位（相对、绝对、固定定位），则相对于最近一级有定位的祖先元素进行定位
4.不再占有原来的位置
5.常用于子绝父对的应用
（三）fixed
1.相对于浏览器可视窗口
2.将元素固定，不会随着浏览条的滚动而滚动
（四）sticky
粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置时将其固定
（五）定位应用
1.先子绝父对
2.将子元素设为margin:auto,top:0,left:0,right:0,bottom:0可让其相对于父元素水平垂直居中
原理：
（1）垂直方向布局的等式的也必须要满足
top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
（2）水平布局
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的内容区的宽度
（3）可设置auto的值 margin width left right
（六）轮播图制作
1.ul>li>a>img 布局轮播图
2.轮播图上的pointer的制作
（1）将div>a作为ul的子元素
（2）对a设置样式：即对每个点设置样式

background-color: rgba(247, 176, 176, 0.3);
background-clip: content-box;
border: 2px solid transparent;（将背景颜色值设置到内容区，边框和内边距不在有背景颜色）
（七）文本对齐
1. /*
vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
/
/
2. text-align 文本的水平对齐
可选值：
left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐
/
/ text-align: justify; /
3. /
white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白

        */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

m0_46647163

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒子模型、float产生的高度塌陷、position

＃＃一、盒子的设置（一）margin(二) border(三) padding1.当设置padding将盒子撑大时，可box-sizing:border-box,此样式设置后盒子的大小为设置的宽高，此外值为content-box时设置的宽高为内容区的大小。＃＃二、行内元素的盒模型1.不能设置宽高2.垂直方向属性的设置不影响整体布局3.display:inline-block可将元素转换为行内块元素，既可以设置宽高，也不独占一行block可设置为块元素此外inline是转为行内元素
复制链接

扫一扫