20190329学习复盘

涎涎原创约 1275 字大约 4 分钟...

20190329学习复盘

注意

本博文仅供学术研究和交流参考，严禁将其用于商业用途。如因违规使用产生的任何法律问题，使用者需自行负责。

HTML基本标签

双标签
自封闭标签：img hr

CSS文本样式

font-maily 字体
font-size 字号 small 14px 
font-weight 字粗细 bold（加粗）normal(不加粗 常归)lighter(更细)100~700
font-style:normal(常归/默认) 斜体 italic oblique 
color: 文字颜色 可以写英文 也可以是色号#0000 #ffffff
line-height:行间距 单行字占的高度
可以用来做单行内容的垂直居中
text-align:对齐方式 left center right ;
text-indent:缩进 首行进行缩进2em
特殊应用 改变文本的位置

文字间距

word-spacing    单词与单词之间的距离
letter-spacing 字母与字线之间的距离  汉字之间的间距用这个属性
white-space 文档中 空白处
            normal 默认情况 敲多个空格 也只显示一个
            pre 会保留空格 
            nowrap 不允许换行
            特殊应用与overflow：hidden 与 text-overflow:ellipsis;
            搭配使用 实现单行文本的缩略显示
text-decoration:文字修饰 underline下划线 overline上划线
line-through 删除线 none没有任何修饰
word-break:break-all 强制换行
           word-break 以单词换行 默认

display

displsy:元素的形式
       block将内联元素转化成块元素     
       inline-block 内联块元素 可以写宽高但是不独占一行
       inline 可以将一个块元素转化成内联元素

<style>
    span{
        display: inline-block;
        vertical-align: top;
        width: 80px;
        height: 80px;
        background: blue;
        font-size: 40px;
        text-align: center;
    }
    span small{
        display: block;
        font-size: 12px;
    }
    div{
        display: inline;
    }
</style>
<span>02<small>2019-03</small></span>
<a href="">
    新闻标题
</a>
<div>
    aaa
</div>
<div>
    aaa
</div>

效果如下：

<style>
    ul>li{
        margin:10px;
        display: inline-block;
        width: 60px;
        height: 30px;
        line-height: 30px;
        background: #1e90ff;
        color:#fff;
        text-align: center;
    }
</style>
<ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
    <li>项目4</li>
</ul>

效果如下：

table 将元素展示为表格形貌
table-cell  将元素展示为单元格形式
特殊的用法

<style>
    .order-box>ul{
        display: table;
    }
    .order-box>ul>li{
        width: 120px;
        display: table-cell;
        vertical-align: middle;
        height: 100px;
    }
    .order-box>ul>li>img{
        width: 100px;
    }
</style>
<div  class="order-box">
    <ul>
        <li>
            <img src="" alt="这里是一张图片">
        </li>
        <li>商品名称</li>
        <li>商品价格</li>
        <li>订单状态</li>
    </ul>
</div>

效果如下：

none:
width
height
border
标准的盒模型width = width + margin + padding + border 
css3盒模型 width = width + margin

<style>
    .box-group{
        width: 100%;
        overflow: hidden;
        background: #008000;
        float:left;
        margin-bottom:100px;
    }
    .box-item{
        float:left;
        width:22.5%;
        height: 200px;
        margin-left:2%;
        background:#adff2f
    }
</style>
<div class="box-group">
    <div class="box-item"></div>
    <div class="box-item"></div>
    <div class="box-item"></div>
    <div class="box-item"></div>
</div>

效果如下：

目前常用的是CSS3的盒模型，如果项目要求兼容IE8要用标准盒模型

Float 浮动

float:left right
使用此属性的元素/标签将变为内联块
将脱离文档流 影响父节点的高度
将影响下一行要表现的内容    

解决浮动的影响；
1、父节点写高度
2、在下一行的内容的父节点上加clear:both清除浮动
3、在浮动元素的父节点上加上一个overflow:hidden，并且
不能写高度 如果想加 默认高 可以写min-height

<style>
    .list{
        background:grey;
        overflow: hidden;
        margin-top: 10px;
    }
    .box{
        margin-right: 5px;
        width: 100px;
        height: 100px;
        background: #adff2f;
    }
    .left{
        float: left;
    }
    .right{
        float: right;
    }
    .ditem{
        display: inline-block;
    }
</style>
<div class="list">
    <div class="box left"></div>
    <div class="box left"></div>
    <div class="box left"></div>
    <div class="box right"></div>
</div>
<div class="list">
    <div class="box ditem"></div>
    <div class="box ditem"></div>
    <div class="box ditem"></div>
    <div class="box ditem"></div>
    <div class="box ditem"></div>
</div>

效果如下：

homework:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework1</title>
</head>
<body>
<style>
    div,img,h1,p,button{
        margin:0;
        padding:0;
    }
    .list_box{
        height: 200px;
    }
    .list_box>.left{
        float: left;
        width: 20%;
    }
    .list_box>.middle{
        float: left;
        width: 60%;
    }
    .list_box>.middle>p{
        margin-top: 20px;
    }
    .list_box>.right{
        float: left;
        width: 20%;
        line-height: 200px;
    }
</style>
<div class="list_box">
    <div class="left">
        <img src="" alt="这里很明显是一张图片">
    </div>
    <div class="middle">
        <h1>商品标题</h1>
        <p>
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.
            Adipisci alias amet assumenda
            beatae debitis delectus dicta eligendi fugiat
            in ipsam nam nobis numquam pariatur quia quo
            rem, ut veniam voluptate?
        </p>
    </div>
    <div class="right">
        <button>加入购物车</button>
    </div>
</div>
<div class="list_box">
    <div class="left">
        <img src="" alt="这里很明显是一张图片">
    </div>
    <div class="middle">
        <h1>商品标题</h1>
        <p>
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.
            Adipisci alias amet assumenda
            beatae debitis delectus dicta eligendi fugiat
            in ipsam nam nobis numquam pariatur quia quo
            rem, ut veniam voluptate?
        </p>
    </div>
    <div class="right">
        <button>加入购物车</button>
    </div>
</div>
<div class="list_box">
    <div class="left">
        <img src="" alt="这里很明显是一张图片">
    </div>
    <div class="middle">
        <h1>商品标题</h1>
        <p>
            Lorem ipsum dolor sit amet,
            consectetur adipisicing elit.
            Adipisci alias amet assumenda
            beatae debitis delectus dicta eligendi fugiat
            in ipsam nam nobis numquam pariatur quia quo
            rem, ut veniam voluptate?
        </p>
    </div>
    <div class="right">
        <button>加入购物车</button>
    </div>
</div>
</body>
</html>

效果如下：

20190329学习复盘

20190329学习复盘

HTML基本标签

CSS文本样式

文字间距

display

Float 浮动

分割线

预览:

20190329学习复盘

# 20190329学习复盘

# HTML基本标签

# CSS文本样式

# 文字间距

# display

# Float 浮动

# 分割线

预览:

20190329学习复盘

HTML基本标签

CSS文本样式

文字间距

display

Float 浮动

分割线