Front-end basis of CSS properties

I. Background Properties

<style>
    p {
        /*background color*/
        background-color: red;
        /*font color*/
        color: blue;
        / * Width and height * /
        width: 600px;
        height: 600px;
        /*Background picture*/
        background-image: url('hlw.png');

        / * Background-repeat * /
        background-repeat: no-repeat;
        /*
        repeat (default): tiled background image filled the whole page
        repeat-x: tiled background image only in the horizontal direction
        repeat-y: tiled background image only in the vertical direction
        no-repeat: no background image tiling
        */

        / * Background-position (if not tiled, centered by default) * /
        / * First, adjust the position of the keyword * /
        background-position: right top;
        /*
        right: the right
        left：左
        center: the
        top: on
        bottom: lower
        */
        / * The second, according to the length value to adjust the position * /
        background-position: 400px 0;
        / * Third, the percentage adjustment position * /
        background-position: 50% 50%;
    }
</style>

Support shorthand:

<style>
    p {
        width: 600px;
        height: 600px;
        background: red url("hlw.png") no-repeat right top;
    }
</style>

A common use of background image case is that many sites will allow many small icon on a picture, and then to display pictures based on location. Reduce the frequency of image requests.

 Reference links

An interesting example:

  Do not move the mouse to scroll background

Second, Borders

Border Properties 

• border-width: Border width
• border-style: Border style
• border-color: border color

Border Style

value	description
none	Rimless.
dotted	Dot dashed border.
dashed	Rectangular dotted border.
solid	Solid border.

 

 

 

 

<style>
    p {
        border-width: 2px;
        border-style: solid;
        border-color: red;
    }
</style>

Commonly used shorthand way:

<style>
    p {
        border: 2px solid red;
    }
</style>

In addition to a unified set may be separately provided outside the frame to form one frame, as follows:

<style>
    p {
        border-top-style: dotted;
        border-top-color: red;
        border-right-style: solid;
        border-bottom-style: dotted;
        border-left-style: none;
    }
</style>

三、border-radius

This effect can be achieved with attribute rounded border.

The border-radius set to be longer or to obtain a high half circle.

<style>
    p {
        width: 200px;
        height: 200px;
        background-color: red;

　　　　　/ * Set to a half, becomes circular * /
        border-radius: 50%;
    }
</style>

Four, display properties

HTML elements for controlling the display.

value	significance
display:"none"	HTML document element exists, but does not display in the browser. JavaScript code typically used for mating.
display:"block"	Default recognition occupies the entire width of the page, if the specified width is provided, it will use margin remaining partially filled.
display:"inline"	Press display inline elements, then re-set the element's width , height , margin-Top , margin-bottom and float property will not be affected.
display:"inline-block"	At the same time that the element has the characteristics of inline elements and block-level elements.

 

 

 

 

display: "none" and visibility: hidden differences:

visibility: hidden: hide an element, but hidden element still occupies the same space previously not hidden. In other words, although the element is hidden, but still affects layout.

display: none: You can hide an element, and the hidden element will not take up any space. In other words, this element is not only hidden, and the space occupied by the original element will disappear from the page layout.

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border: 2px black solid;

        / * Hide, does not occupy space * /
        display: none;
        / * Hide, but the space layout * /
        visibility: hidden;
    }
    span {
        width: 200px;
        height: 200px;
        background-color: blue;
        border: 2px black solid;

        display: inline-block;
    }
</style>

 Five, CSS box model

• margin (margins): used to control the distance between the element by element; margin most basic purpose is to control the spacing elements surrounding space, spaced apart from the purpose of the viewing angle.
• padding (inner fill): used to control the distance between the content and the frame;   
• Border (Borders) : around the inner and outer margins content border.
• Content (content) : the contents of the box, displaying text and images.

Figure it:

 Six, Margin Margin

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border: black solid 2px;

        margin-top: 5px;
        margin-right: 10px;
        margin-bottom: 15px;
        margin-left: 20px;
    }
</style>

 Recommended use shorthand:

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border: black solid 2px;

        / *, Right, down, left, clockwise * /
        margin: 5px 10px 15px 20px;
        / * Up and down, like, about the same as can be abbreviated * /
        margin: 10px 20px;
        / * Write down together around the same * /
        margin: 20px;

　     　/ * Common centered * /　　　
        margin: 0 auto;
    } 
</style> 

Seven, padding inside filling

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border: black solid 2px;
        
        padding-top: 5px;
        padding-right: 10px;
        padding-bottom: 15px;
        padding-left: 20px;
    }
</style>

 推荐使用简写：

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        border: black solid 2px;

        /*上，右，下，左，顺时针*/
        padding: 5px 10px 15px 20px;
    } 
</style>

补充padding的常用简写方式：

• 提供一个，用于四边；
• 提供两个，第一个用于上－下，第二个用于左－右；
• 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
• 提供四个参数值，将按上－右－下－左的顺序作用于四边；

 八、float

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

• 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

参考示例

<style>
    span.left {
        width: 20%;
        height: 300px;
        background-color: red;

        /*向左浮动*/
        float: left;
    }
    span.right {
        width: 80%;
        height: 300px;
        background-color: blue;

        /*向右浮动*/
        float: right;
    }
</style>

 九、clear

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

 

 

 

 

 

注意：clear属性只会对自身起作用，而不会影响其他元素。

十、overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

 

 

 

 

 

• overflow（水平和垂直均设置）
• overflow-x（设置水平方向）
• overflow-y（设置垂直方向）

圆形头像示例：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>圆形的头像示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #eeeeee;
        }
        .header-img {
            width: 1000px;
            height: 1000px;
            border: 3px solid white;
            /*设置框为圆形*/
            border-radius: 50%;
            /*把溢出框的内容隐藏*/
            overflow: hidden;
        }
        .header-img>img {
            /*把图片改成框的大小*/
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header-img">
        <img src="hlw.png" alt="">
    </div>
</body>
</html>

 十一、定位（position）

static

static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative（相对定位）

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

absolute（绝对定位）

定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

返回顶部示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>返回顶部示例</title>
    <style>
        * {
           margin: 0;
        }
        .d1 {
            height: 1000px;
            background-color: #eeee;
        }

        .scrollTop {
            background-color: darkgrey;
            padding: 10px;
            text-align: center;
            position: fixed;
            right: 10px;
            bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="d1">111</div>
    <div class="scrollTop">返回顶部</div>
</body>
</html>

十二、z-index

<style>
    div {
        z-index: 999;
    }
</style>

设置对象的层叠顺序，数值大的会覆盖在数值小的标签之上。z-index 仅能在定位元素上奏效。

模态框示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>模态框示例</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.4);
            z-index: 99;
        }
        .modal {
            background-color: white;
            height: 300px;
            width: 400px;
            z-index: 1000;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div>在苍茫的大海上，狂风卷记着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div>
    <div class="cover"></div>
    <div class="modal">
        <form action="">
            <p class="c1">账号：<input type="text"></p>
            <p class="c1">密码：<input type="text"></p>
            <p class="c1"><input type="submit"></p>
        </form>
    </div>
</body>
</html>

Thirteen, opacity

Transparency used to define:

• It ranges from 0 to 1
• 0 is completely transparent
• 1 is completely opaque