标签：注意   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;
}

标签1
标签2
标签3
标签4

dispaly显示

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

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

div标签
我是div

我是div

span标签
我是span

我是span

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

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

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

float浮动

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

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

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

天堂

地狱

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

    
天堂
    
地狱
    

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

    
天堂
    
地狱
    
    

font 字体和颜色

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

字体格式
一白日依山尽，黄河入海流。
欲穷千里目，更上一层楼。

字体大小
从此寻花问柳，闭口不谈一生厮守。
从此红灯绿酒，再也不想牵谁的手。
从此人海漂流，闭口不谈爱到白头。

字体加粗
我愿化身石桥 只为看一眼你的内裤。
中年男人哪有容易的事？
中年男人容易胖、容易老、容易头发变稀少。

字体颜色
远上寒山石径斜，白云生处有人家。
停车坐爱枫林晚，霜叶红于二月花。。

文字对齐方式

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

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

水平方向：左、中、右

水平方向
Alex媳妇满身大汗

王老汉

武老汉

垂直方向：上、中、下

垂直方向
Alex媳妇满身大汗

王老汉（推荐）


    武老汉，这个知识点下一节细讲

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;

小米顶部导航示例

    

        

            小米商城
            MIUI
            IoT
            云服务
		
        
		
购物车（0）
                
        

            登录
            注册
            消息通知
        
                
        

                
    

CSS-css样式-1

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

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