您的位置: 首页  >  文章  >  CSS属性(CSS和HTML文件缓存问题)/页面布局/盒子居中/

CSS属性(CSS和HTML文件缓存问题)/页面布局/盒子居中/

分类: 文章 • 2023-03-16 22:50:01

CSS属性参考手册：http://www.w3school.com.cn/cssref/index.asp

（CSS 3有很多强大的属性，尽量多去了解）

【css/js的版本修改，客户端立即更新缓存的方法：https://blog.****.net/wlzx120/article/details/48827993/

缓存机制（要研究还需再找）：https://blog.****.net/i13738612458/article/details/80383390】

【继承性问题】

一、常用的属性：

1.width 和 height

默认auto：height:auto表示高度随内容的高度而撑开的；width:auto对行内元素来说表示宽度随内容的宽度而撑开的，对块级元素来说相当于width:100%（注意浮动流是不会撑起父元素的宽高的）

%：父元素内容宽高的百分比（内容宽高含义见第2点）

px：赋予固定值，其他单位同理

2.box-sizing（盒子模型：外边距~边框~内边距~内容）

默认content-box：让width = 内容的宽度（height同理）

border-box：让width = 边框的宽度 + 内边距的宽度 + 内容的宽度（height同理）

【例子：当父元素width是100px、内边距5px且box-sizing: border-box;时，子元素div的width:auto;时，可以算出子元素的宽度是90px；

当父元素width是100px、内边距5px且box-sizing为默认时，子元素div的width:auto;时，可以算出子元素的宽度和父元素width一样是100px；】

3.border边框（有很多属性，具体看CSS属性参考手册）

常用例子border:5px solid black;表示四条边（上 右 下 左）都是宽度为5px的黑色实线

4.外边距margin和内边距padding

margin：0，auto；可以使该标签水平居中于父元素

5.box-align 和 box-pack 属性

规定内容水平垂直的对齐（具体看CSS参考手册）

6.float浮动

float浮动（具体看浮动参考视频：https://study.163.com/course/courseMain.htm?courseId=1003864040）
元素有了float属性就会脱离默认的标准流（块级垂直排版，行内水平排版）成为浮动流排版
浮动流只有水平排版，左和右，没有居中，margin：0，auto；也会失效
浮动流排版不区分块级元素和行内元素，一律水平排版，且行内也可以设置宽高了，就像自动给标签添加了行内块级元素属性
所有标准流处于底层，按标准流排版；所有浮动流处于上层，按浮动流排版
浮动流排版规则：
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面
不同方向上（左和右）的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动
浮动元素太多一行塞不下时，会另起一行，甚至溢出
浮动流半脱标、浮动流字围现象
【浮动流半脱标、浮动流字围现象例子】

CSS属性(CSS和HTML文件缓存问题)/页面布局/盒子居中/

【清除浮动（外墙法）：因为父元素的高度不会被浮动流高度撑起，容易导致页面效果跟想象中的不一样，所以有时需要清除浮动，原理看浮动参考视频相关内容】

CSS属性(CSS和HTML文件缓存问题)/页面布局/盒子居中/

 

7.定位属性（参考视频：https://study.163.com/course/courseMain.htm?courseId=1003864040）

定位：position属性配合left、right、top、bottom属性移动位置，配合z-index变化层次
relative相对定位：不脱离标准流，相对于自己以前在标准流中的位置来移动，top:20px表示距离原来位置的上部20px
【单用的弊端：相对定位移动后，原本位置的空间也会被占用，例如box1右边贴着box2，就算box1移动到box2右边，原box1位置会留下空白，box2也不会往左移动。】
absolute绝对定位：脱离标准流,相对上一级定位流移动（没有就取body)，绝对定位的元素会忽略祖先元素的padding
【单用的弊端：如果绝对定位是以body(非body的话不会)为参考点，那么其实是以网页首屏宽高为参考点，网页宽高变化时，绝对定位不会变化；】
【子绝父相——企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用。相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流】
【绝对定位水平居中——绝对定位后margin: 0 auto失效；可以使用left: 50%; margin-left:-元素宽度一半px;代替】
fixed固定定位：固定定位可以让某个盒子不随着滚动条的滚动而滚动
【应用场景：导航条、两侧广告、返回顶部等不随滚动条滚动的元素，具体案例看参考视频：定位练习——新浪首页】
static静态定位:默认的标准流，忽略left、right、top、bottom、z-index属性
z-index改变覆盖层次：默认定位流覆盖标准流，后面的定位流覆盖前面的定位流。

8.overflow

hidden：隐藏溢出。

【给body设置overflow-x: hidden;可以去除水平进度条】

9.opacity

0~1：改变不透明度，默认1

10.其他查看参考手册

 

二、页面布局

参考视频（浮动练习上中下）：https://study.163.com/course/courseMain.htm?courseId=1003864040

简单说明：从上到下，从外到内分析分解；垂直用标准流，水平用浮动流；注意边距；

 

三、盒子居中

例子：把一个盒子放在另一个盒子正中心

<div class="outer">
    <div class="inner"></div>
</div>

方法一：外盒子box-sizing: border-box让width等于内容宽度+内边距宽度+边框；然后设置内边距让内盒子居中

        .outer{
            width:200px;
            height: 200px;
            background-color: skyblue;
            box-sizing: border-box;
            padding: 50px;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

方法二：外盒子加边框或者overflow: hidden;，内盒子加外边距

        .outer {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            overflow: hidden;
            /*border:1px solid skyblue;*/
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 50px;
        }

方法三（CSS 3特性）：利用box-align 和 box-pack 属性，IE不适用

        .outer {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            /* Safari, Chrome, and Opera */
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

 

 

相关推荐