web前端入门知识：1-4

一. 盒模型：box model

- css将页面中的所有元素都设置为一个矩形的盒子

- 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置

- 每一个盒子都是由以下几个部分组成：

1. 决定盒子大小：

内容区(content)：width + height

内边距(padding)：

<!-- 外层元素padding代替

内层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

外层元素 overflow:hidden;

内层元素 加float:left;或display:inline-block;

内层元素padding:1px; -->

边框(border)

2. 决定盒子位置：

外边距(margin)

盒模型大小(盒模型的计算方法)

宽度：border(左右) + width + padding(左右)

高度：border(上下) + height + padding(上下)

标准盒模型：

在标准盒模式下，元素宽度 = 内容width + padding(左右) + border(左右)，高度亦然

怪异盒模型：

在怪异盒模式下，元素宽度 = 元素内容的宽度，高度亦然

(width = 内容区宽度 + padding + border)

CSS3的box-sizing属性

语法：

box-sizing : content-box || border-box;

content-box : 将采取标准盒模式进行解析计算

border-box : 将采取怪异盒模式进行解析计算 盒子大小等于你设置的大小

3.长度单位

像素

- 屏幕（显示器）实际上是由一个一个的小点点构成的

- 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

- 所以相同的200px在不同的设备下显示效果不一样

百分比

- 也可以将属性设置为相对于其父元素的百分比

- 设置百分比可以使子元素跟随父元素的改变而改变

em

- em是相对于元素的字体大小来计算的

- 1em = 1font-size (字体默认是16px)

- em会根据字体大小的改变而改变

rem

- rem是相对于html根元素的字体大小进行计算的

4. 颜色单位：

在css中可以直接使用颜色名来设置各种颜色

比如：red、orange、blue、yellow、green... ...

但在css中直接使用颜色名是非常不方便的

RGB：

- RGB通过三种颜色的不同浓度来调配出不同的颜色

- R red，G green，B blue

- 每一种颜色的范围在 0 - 255 之间

- 语法：RGB(红色，绿色，蓝色)

RGBA:

- 就是在rgb的基础上增加一个a表示不透明度

- 需要四个值，前三个和rgb一样，第四个表示不透明度

1表示完全不透明 0表示完全透明 .5表示半透明

十六进制的RBG值：

- 语法：#红色绿色蓝色

- 颜色浓度通过 00-ff 表示

- 如果颜色两位两位重复可以进行简写

#aabbcc --> #abc

transparent 背景透明(默认值)

二.margin的问题

1.边距重合 ：

正常文档流的父元素里面的两个子元素在垂直方向相遇，上面的设置下边距，下面的设置上边距，两个中间的边距不会相加，只会取最大值。

具体的叠加规则是：正正取大值、正负值相加、负负最负值

解决方法：直接给margin-bottom与margin-top其中一个元素两者之和

2.边距传递：(只会上下传递，左右不传递)

正常文档流的父元素里面的第一个子元素设置上下边距时，这个上下边距会传递给父级元素。

解决方法：

1、父元素padding代替

2、父元素透明边框 border:1px solid transparent;

3、子元素绝对定位 postion:absolute;

4、父元素 overflow:hidden;(溢出隐藏)

5、父或子元素加 float:left;

6、父或子元素加 display:inline-block;

display：用来设置元素显示的类型

- 可选值：inline、block、inline-block、none

- none 元素不在页面中显示 不占位置

visibility：用来设置元素的显示状态

- visible 默认值，元素在页面中正常显示

- hidden 元素在页面中隐藏 不显示，但是依然占据页面的位置

3. 居中显示元素

auto 自动(浏览器会自动帮你去算距离)

margin-left:auto; 元素居右显示

margin-right:auto; 元素居左显示

元素居中显示

margin:0 auto;

三.背景与圆角

1.背景

background 背景

background-color 背景色

background-image 背景图片【默认会铺满整个容器】

background-repeat 背景图片是否重复(平铺)

默认背景图平铺:repeat

不重复平铺:no-repeat

沿着x轴平铺:repeat-x

沿着y轴平铺:repeat-y

background-position:x y; 背景图片的位置

通过 top left right bottom center 方位设置

使用方位设置时必须要同时指定两个值，如果只写了一个则第二个默认就是center

通过偏移量来指定背景图片的位置：

水平方向的偏移量 垂直方向的偏移量，如果两个值都不写的话默认值是 0 0 ，左上角

background-attachment 背景图片是否滚动

scroll 背景图片跟随滚动条滚动(默认)

fixed 背景图片不会跟随滚动条滚动

background-size 设置背景图片的大小

第一个值表示宽度

第二个值表示高度

- 如果只写了一个，则第二个值默认是 auto

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

<!--

2.圆角

border-radius 边框圆角【用来设置圆角 圆角设置的圆的半径大小】

单位：px %

一个值时：border-radius:10px：表示四个角的半径

两个值时：border-radis:10px 20px：10表示左上右下的角，20表示右上左下的角

三个值时：border-radius:10px 20px 30px：10表示左上角，20表示右上左下的角，30表示右下角

四个值时：border-radius:10px 20px 30px 40px：10表示左上，20表示右上，30表示右下，40表示左下（顺时针）

每个角的设置：

border-top-left-radius：

border-top-right-radius：

border-bottom-left-radius：

border-bottom-right-radius：

<style> 
span {
            color: #fff;
        }

  p {
            width: 200px;
            height: 200px;
            background-color: aquamarine;

            border-radius: 10px;
            border-radius: 10px 20px;
            border-radius: 10px 20px 30px;
            border-radius: 10px 20px 30px 40px;
            border-radius: 50%;

            /* 设置元素阴影 内阴影inset 水平阴影 垂直阴影 模糊程度  */
            /* 盒子阴影不占用空间，不会影响其他盒子排列 */
            box-shadow: inset 20px 20px 20px green;
        }

  p:hover {
            background: red;
        }

.div {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            border: 2px solid black;
            display: inline-block;
        }

 .div1 {
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            border: 2px solid black;
            display: inline-block;
        }

.div2 {
            width: 50px;
            height: 50px;
            border-radius: 50px 0 0 0;
            border: 2px solid black;
            display: inline-block;
        }

 .sanJiao-top {
            width: 0;
            height: 0;
            border-bottom: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

 .sanJiao-bottom {
            width: 0;
            height: 0;
            border-top: 50px solid red;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

 .sanJiao-left {
            width: 0;
            height: 0;
            border-right: 50px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }

 .sanJiao-right {
            width: 0;
            height: 0;
            border-left: 50px solid red;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
        }

 .say {
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background: red;
            position: relative;
        }

.say::after {
            width: 0;
            height: 0;
            content: '';
            position: absolute;
            bottom: -10px;
            border-top: 10px solid red;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            left: 20px;

        }
    </style>


——————————————————————————
<!-- 实现圆 -->
    <p></p>
    <!-- 实现圆 -->
    <div class="div"></div>
    <!-- 实现半圆 -->
    <div class="div1"></div>
    <!-- 实现1/4圆 -->
    <div class="div2"></div>
    <!-- 三角 -->
    <div class="sanJiao-top"></div><br>
    <div class="sanJiao-bottom"></div><br>
    <div class="sanJiao-left"></div><br>
    <div class="sanJiao-right"></div><br>
    <!-- 对话框 -->
    <div class="say"></div>

四.练习

1.欢迎加入我们

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: aliceblue;
        }
        .div1{
            background-color: #000;
            padding: 10px 0;
        }
        .div11{
            width: 900px;
            margin: auto;
            /* vertical-align: bottom; */
        }
        .div1 a,.div1 li,.div1 ul{
            display: inline-block;
        }
        .div1 .left{
            padding: 20px 20px;
            border: 1px solid #fff;
            margin-right: 470px;
            
        }
        .div1 .right li{
            margin-left: 30px;
        }

        .div2{
            width: 100%;
            height: 600px;
            background-color: aqua;
        }
        .div2 .left{
            width: 300px;
            display: inline-block;
            vertical-align: top;
            margin-top: 200px;

        }
        .div2 h3{
            border-bottom: 1px solid rgb(39, 32, 32);
            padding-bottom: 10px;
            width: 150px;
        }
        .div2 p{
            line-height: 40px;
        }
       .div2 .right{
            display: inline-block;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px;
            margin: 110px 3px 10px 228px;
            text-align: center;

       }
       .div2 .right input{
            display: block;
            padding: 10px 10px 10px 10px;
            margin: 30px 0 40px 0;
            width: 300px;

       }

       
       .div3{
            
            width:100%;
            height: 120px;
            background-color: rgb(254, 250, 250);
            display:inline-block;
            padding-top: 25px;
            
        }
        /* .div31{
            width: 900px;
            margin: 0 auto;
            padding-top: 30px;
        } */

    </style>
</head>
<body>
    <div class="div1">
        <div class="div11">
            <a href="#" class="left">LOGO</a>
            <ul class="right">
                <li><a href="#">HOME</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">JOBS</a></li>
 
            </ul>
            <!-- CONTACT</span> -->

        </div>
    </div>
   <div class="div2">
        <div class="div11">
            <div class="left">
                <h3>ABOUT US</h3>
                <P>We are a creative company who works with passion and love. We provide the best services you need</P>
            </div>
            <div class="right">
                <h4>WELCOM TO JOIN US</h4>
                <P>we will give you the best servic:</P>
                <hr>
                <input type="text" placeholder="EMAIL ADDRESS">
                <input type="text" placeholder="PASSWORD">
                <input style="width: 100%;" type="submit" value="SIGN IN">
                <p>I forgot my password </p>
                
            </div>
        </div>
   </div>
   <div3 class="div3" align="center">
        
            <h6>Copyright 2006 -2016 Buit by Asis .All rights reserved</h6>
            <h6>Read the boring legat stulf</h6>
       
   </div3>
</body>
</html>