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

最新推荐文章于 2024-04-30 23:00:09 发布

推开世界的门

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量179

点赞数 1

分类专栏：前端学习笔记文章标签：学习笔记

本文链接：https://blog.csdn.net/qq_38845858/article/details/86531164

版权

前端学习笔记专栏收录该内容

45 篇文章 5 订阅

订阅专栏

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>

效果图：

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>

效果图：

左右布局型

<!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>

效果图

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

通栏写法

代码

<!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>

效果图