标签：注意   head   add   size   服务   作用   color   width   购物   

CSS样式-1

height和width

在html中如果想要给标签设置高度和宽度的话，需要使用height和width属性，并且在设置时有两种单位：

• 像素，根据像素设置。
• 百分比，根据百分比设置。

注意点：

? 1.因网页高度无限制，所以默认高度无法设置百分比，如果非要设置，则需要父级标签设置固定高度，子标签便可使用百分比设置高度。

? 2.行内标签无法设置高度和宽度，如果想要设置必须转换为块级标签才能应用。

.c1{
    height: 60px;
    background-color: #2b669a;
}
.c2{
    height: 60px;
    width: 200px;
    background-color: #2aabd2;
}
.c3{
    height: 60px;
    width: 40%;
    background-color: gold;
}
.c4{
    height: 60px;
    width: 60%;
    background-color: deeppink;
}

<div class=‘c1‘>标签1</div>
<div class=‘c2‘>标签2</div>
<div class=‘c3‘>标签3</div>
<div class=‘c4‘>标签4</div>

dispaly显示

display属性有3个常用的值，用于修改属性的展示状态

• display:block，变为块级标签。
• display:inline;，变为行内标签。

<h1>div标签</h1>
<div style="background-color: #2aabd2;display: inline;height: 60px;">我是div</div>

<div style="background-color: #2aabd2;height: 60px;">我是div</div>

<h1>span标签</h1>
<span style="background-color:gold;height: 60px;">我是span</span>

<span style="background-color:gold;display: block;height: 60px;">我是span</span>

<!--总结，HTML标签中 div和span标签可以通过display属性完全互换，其实记住一个div就行了。-->

• display:inline-block，变为行块内标签（行内和块级特性结合）。

  可以设置高度，宽度显示标签内的内容

• display:none，把标签隐藏。（设置display:none隐藏标签，移除之后显示标签）

float浮动

float浮动用于实现N个标签并排存放（主要针对块级标签，行内标签默认就可以并排存放）。

页面布局时，一般都会使用div标签及float属性来实现，float设置时一般有两个值：

• float:left，标签并排向左浮动。
• float:right，标签并排向右浮动。

<div style="float:left;width: 100px;background-color: green;">天堂</div>

<div style="float: left;width: 100px;background-color: red;">地狱</div>

特别注意：脱离文档流，布局中如何使用了float浮动，就会出现脱离文档流的现象，导致父标签没有被撑起来，

<div style="background-color: pink;">
    <div style="float:left;color: green;">天堂</div>
    <div style="float: left;color: red;">地狱</div>
    
</div>

为了防止脱离文档流现象，所以以后只要出现浮动就记得要清楚浮动

<div style="background-color: pink;">
    <div style="float:left;color: green;">天堂</div>
    <div style="float: left;color: red;">地狱</div>
    <!-- 清除浮动，与使用了float属性的标签放在同一级 -->
    <div style="clear:both;"></div>
</div>

font 字体和颜色

在前端开发过程中会经常调整 字体格式、字体大小、字体粗细、字体颜色。

<h1>字体格式</h1>
<div style="font-family: ‘Times New Roman‘,Georgia,Serif;">一白日依山尽，黄河入海流。</div>
<div style="font-family: Arial,Verdana,Sans-serif;">欲穷千里目，更上一层楼。</div>

<h1>字体大小</h1>
<div style="font-size: 13px;">从此寻花问柳，闭口不谈一生厮守。</div>
<div style="font-size: 16px;">从此红灯绿酒，再也不想牵谁的手。</div>
<div style="font-size: 18px;">从此人海漂流，闭口不谈爱到白头。</div>

<h1>字体加粗</h1>
<div style="font-weight: 100;">我愿化身石桥 只为看一眼你的内裤。</div>
<div style="font-weight: 300">中年男人哪有容易的事？</div>
<div style="font-weight: 400">中年男人容易胖、容易老、容易头发变稀少。</div>

<h1>字体颜色</h1>
<div style="color: red;">远上寒山石径斜，白云生处有人家。</div>
<div style="color:#f0ad4e">停车坐爱枫林晚，霜叶红于二月花。。</div>

文字对齐方式

先设置宽高，垂直方向上的对齐需要根据高度进行设置

.demo1{
    width: 400px;
}
.demo2{
    width: 400px;
    height: 100px;
}

水平方向：左、中、右

<h1>水平方向</h1>
<div class="demo1" style="background-color: pink;text-align: left;">Alex媳妇满身大汗</div>

<div class="demo1" style="background-color: darkseagreen;text-align: center;">王老汉</div>

<div class="demo1" style="background-color: goldenrod; text-align: right;">武老汉</div>

垂直方向：上、中、下

<h1>垂直方向</h1>
<div class="demo2" style="background-color: pink;">Alex媳妇满身大汗</div>

<div class="demo2" style="background-color: darkseagreen;line-height: 100px;">王老汉（推荐）</div>

<div class="demo2" style="background-color: goldenrod;position: relative; ">
    <span style="position: absolute;bottom: 0;">武老汉，这个知识点下一节细讲</span>
</div>

padding 内边距

padding内边距作用是 为被应用的标签创建一部分内部间距。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
padding-left:8px;
padding-right:2px;
padding-top:4px;
padding-bottom:18px;

/* padding:上 右 下 左; */
padding:10px 0 2px; 4px;

/* padding:上下  右左; */
padding:7px 5px;

/* padding:上下右左; */
padding:8px;

margin 外边距

外边距用于相邻的标签之间增加距离用。边距可以设置上、下、左、右方向。

/* 单独设置上下左右内边距 */
margin-left:8px;
margin-right:2px;
margin-top:4px;
margin-bottom:18px;

/* margin:上 右 下 左; */
margin:10px 0 2px; 4px;

/* margin:上下  右左; */
margin:7px 5px;

/* margin:上下右左; */
margin:8px;

注意点：

1.body标签默认有一个 8px的外边距，所以你会发现默认的页面都有一个“白边”。

2.自动居中布局，你应该见过很多网站的内容都在中间放置，两边是空白。

/* 只要指定宽度并设置margin为 0 auto 就可以实现div 自动居中布局*/
width:900px;
margin:0 auto;

小米顶部导航示例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城</title>
        <link rel="shortcut icon" href="img/favicon.ico">
        <style>
            body {
                margin: 0;
                font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
            }
            .container {
                width: 1190px;
                margin: 0 auto;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .header {
                height: 40px;
                line-height: 40px;
                background-color: #333;
                color: #b0b0b0;
                font-size: 12px;
            }
            .header .menus a, .header .account a, .header .car a {
                text-decoration: none;
                display: inline-block;
                padding: 0 5px;
            }
            .header .car a {
                display: inline-block;
                height: 40px;
                padding: 0 15px;
                margin-left: 20px;
                background-color: #424242;
            }
        </style>
    </head>
    
<body>
<div class="header">
    <div class="container">
        <div class="menus left">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>IoT</a>
            <a>云服务</a>
		</div>
        
		<div class="car right"><a>购物车（0）</a></div>
                
        <div class="account right">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
                
        <div style="clear: both;"></div>
                
    </div>
</div>
</body>
</html>

CSS-css样式-1

标签：注意   head   add   size   服务   作用   color   width   购物   

原文地址：https://www.cnblogs.com/Hedger-Lee/p/13062034.html