前端全栈学习笔记第五天 - CSS

小鱼儿 2021-09-17 20:14 358阅读 0赞

1：盒子居中对齐

在写盒子居中对齐之前，先看一个文字居中对齐：  text-align: center//可以让盒子内容(文字，行内元素，行内块元素)居中对齐;

让盒子居中对齐

margin: auto auto;

满足两个条件

必须是快元素

必须指定了宽度

2：外边距合并

利用margin定义同级块级元素的外边距的时候，可能会出现外边距合并的情况(也称外边距塌陷)以大的为准

解决方案：避免就好l

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，想要两个分开有种，一种是给父元素加padding，一种是给子元素加pdding，但是你会发现，子元素会把父元素带跑偏，

解决方法：

1：给父元素加一像素的边框，border，或者border-top或padding-top1 像素但是都会撑开盒子

overflow：hidden

3：padding不会撑开盒子的情况

没有给盒子宽度，盒子是默认宽度

4：圆角练习

代码

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>圆角练习</title>
    	<style type="text/css">
    		a{
    			width: 200px;
    			height: 200px;
    			background: yellow;
    			border-radius: 50%;
    			margin: 30px;
    			padding-left: 15px;
    			text-align: center;
    			line-height: 200px;
    			text-decoration: none;
    			display: inline-block;
    
    		}
    		a:hover{
    			background: pink;
    			color: red;
    		}
    
    	</style>
    </head>
    <body>
    	<a href="#">大家好</a>
    	<a href="#">大家好</a>
    	<a href="#">大家好</a>
    	<a href="#">大家好</a>
    	<a href="#">大家好</a>
    </body>
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70][]

5：盒子阴影

box-shadow：(必选)水平阴影，(必选)垂直阴影，模糊距离(虚实)，阴影尺寸(影子大小)，阴影颜色

6：体会浮动float

标准普通流：自上而下，从左而右

为什么要浮动，让多个块级元素在一行显示

7：浮动特性

浮动会脱离文档流，===脱标 ===会影响标准流

浮动的元素总是会找他最近的父级对齐，但是不会超出内边距，浮动只对下面的盒子有影响

浮动和他的父亲搭配使用的

浮动有影藏模式转换：可以让元素默认转化为行内块元素

妙用：如果给行内元素添加浮动，此时不需要讲他转化为快级元素，也有宽高

8：版心和布局流程

把你心就是可视区，当你滚动鼠标，中心的位置叫版心

布局流程：

确定页面的版心

分析页面的行模块，以及每个行模块的列模块

制作html结构

css初始化，然后开始利用盒子模型原理，进行css+html布局来控制页面的模块

常用布局

一列固定宽度且居中

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style type="text/css">
        #header,
        #banner,
        #main,
        #footer {
            border: 1px dashed black;
            text-align: center;
            width: 900px;
            margin: 0 auto;
        }
    
        #header {
            height: 100px;
            line-height: 100px;
            margin-top: 10px;
    
        }
    
        #banner {
            height: 100px;
            line-height: 100px;
            margin-top: 10px;
    
        }
    
        #main {
            height: 300px;
            text-align: center;
            line-height: 300px;
            margin-top: 10px;
        }
    
        #footer {
            height: 100px;
            border: 1px dashed black;
            line-height: 100px;
            margin-top: 10px;
        }
        </style>
    </head>
    
    <body>
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="main">main</div>
        <div id="footer">footer</div>
    </body>
    
    </html>

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1][]

左右布局型

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style type="text/css">
        #header,
        #banner,
        #main,
        #left,
        #right,
        #footer {
            border: 1px dashed black;
            text-align: center;
            width: 900px;
            margin: 0 auto;
        }
    
        #header {
            height: 100px;
            line-height: 100px;
            margin-top: 10px;
            background: red;
    
        }
    
        #banner {
            height: 100px;
            line-height: 100px;
            margin-top: 10px;
            background: yellow;
    
    
        }
        #main{
        	height: 300px;
            margin-top: 10px;
    
    
        }
    
        #left {
            line-height: 300px;
            margin-top: 5px;
            width: 30%;
            float: left;
            background: orange;
    
        }
    
        #right {
            line-height: 300px;
            margin-top: 5px;
            width: 68%;
            float: right;
            background: blue;
    
        }
    
        #footer {
            height: 100px;
            border: 1px dashed black;
            line-height: 100px;
            margin-top: 10px;
            background: green;
    
        }
        </style>
    </head>
    
    <body>
        <div id="header">header</div>
        <div id="banner">banner</div>
        <div id="main">
        <div id="left">left</div>
        <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2][]

这里左右布局用到了浮动，刚开始直接左边左浮，右边右浮，但是一下布局就乱了。原来在浮动的时候，需要给他加父级盒子，并且给定高度，让他在父级盒子里面浮动，不能瞎浮动！

通栏写法

代码

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>页面布局</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    
        #header-inner,
        #banner,
        #main,
        #left,
        #right,
        #footer-inner {
            border: 1px dashed black;
            text-align: center;
            width: 900px;
            margin: 0 auto;
        }
    
        #header {
            height: 100px;
            line-height: 100px;
            margin-top: 10px;
            background: red;
    
    
        }
    
        #header-inner {
            background: pink;
        }
    
        #banner {
            height: 100px;
            line-height: 100px;
            margin-top: 10px;
            background: yellow;
    
    
        }
    
        #banner li {
            float: left;
            width: 225px;
            height: 100px;
        }
    
        .four {
            background: purple;
            margin-right: 0px;
        }
    
    
        .two {
            background: orange;
        }
    
    
        .four {
            background: purple;
            margin-right: 0px;
        }
    
        #main {
            height: 300px;
            margin-top: 10px;
    
    
        }
    
        #left {
            line-height: 300px;
            margin-top: 5px;
            width: 30%;
            float: left;
            background: orange;
    
        }
    
        #right {
            line-height: 300px;
            margin-top: 5px;
            width: 68%;
            float: right;
            background: red;
    
        }
    
        #footer {
            height: 100px;
            border: 1px dashed black;
            line-height: 100px;
            margin-top: 10px;
            background: blue;
    
    
        }
    
        #footer-inner {
            background: pink;
        }
        </style>
    </head>
    
    <body>
        <div id="header">
            <div id="header-inner">通栏写法</div>
        </div>
        <div id="banner">
            <ul>
                <li class="one">one</li>
                <li class="two">two</li>
                <li class="three">three</li>
                <li class="four">four</li>
            </ul>
        </div>
        <div id="main">
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <div id="footer">
            <div id="footer-inner">通栏写法</div>
        </div>
    </body>
    
    </html>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3][]

通栏写法就是不给父元素设置宽度，让他默认屏幕宽度。子元素和页面版心等宽就可以。中间的四个小方格，是通过u了，li来实现的，采用的浮动加分割。一定要设置他的宽和高，，不然不是盒子模型，怎么布局？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210812/5fc335b8073948f797aa3c87da34eb8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210812/f9d6ce43364d4d178b22cc7af68736c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 2]: /images/20210812/8dedf59aa43f4acd864f9320352b158d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 3]: /images/20210812/729df88ccef2430799374ae6aa5774c7.png