HTML+CSS基础

时间 2020-03-02

标签 html+css html css 基础栏目 CSS 繁體版

原文原文链接

几个月以前学过一段时间的前端，工做缘由都忘的差很少了，如今重温一下，总结一些基础的知识点。css

css有盒模型，网页布局也有基本模型。布局模型和盒模型同样都是css最基本、最核心的概念。可是布局模型是创建在盒模型基础上的，又不一样于咱们常说的css布局样式或css布局模板。布局模型是本，css布局模板是末，是外在表现形式。html

css包含三种基本的布局模型：一、流动（Flow）二、浮动（Float）三、层（Layer）前端

块级元素：div、p、h一、form、ul、li。设置display：block就是将元素显示为块级元素，具有块状元素的特色。chrome

块级特色：一、每一个块级元素都重新的一行开始，而且其后的元素也另起一行（霸道）；浏览器

二、元素的高度、宽度、行高以及顶和底边距均可设置。布局

三、元素宽度如不设置，是它自己父容器的100%（除非设置一个宽度）；字体

内联元素（行内元素）：span、a、lable、strong、em。设置display：inline将元素设置为内联元素。spa

内联特色：一、和其余元素都在一行上；firefox

二、元素的高度、宽度及顶部和底边距不可设置；code

三、元素宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素：img、input。设置display：inline-block将元素设置为内联块状元素。

内联块状特色：一、和其余元素都在一行上；

二、元素高度、宽度、行高及顶和底边距均可设置。

一、Flow

Flow是默认的网页布局模式。它具备两个比较典型的特征：

第1、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，由于在默认状态下，块状元素的宽度都为100%，块状元素都会以行的形式占据位置。

第2、内联元素都会在所处的包含元素内从左到右水平分布显示。

二、Float

实现两个块状元素并排显示（设置width、height和float）（设置为right的话，第一个块状元素会靠右）；

三、Layer（对图层精肯定位）

绝对（absolute）：将元素从文档流中拖出来，而后使用left、right、top、bottom属性相对于其最接近的一个具备定位属性的父包含块进行绝对定位（若不存在就相对于body）；

相对（relative）：它的完成过程是首先按static（float）方式生成一个元素（像层同样浮动），而后相对于之前的位置移动，偏移前的位置不变；

固定（fixed）：它相对移动的坐标是视图（屏幕内的网页窗口），视图自己是固定的，不随滚动条变化而变化。与background-attachment:fixed;属性相同；

Relative与Absolute组合使用：

一、参照定位的元素必须是相对定位元素的父辈元素；

二、参照定位元素加入positive：relative；定位元素加入position：absolute。

四、简写：Eg：margin：10px 20px 30px 20px；

简化为：margin：10px 20px 30px；

color：#000000；简化为color：#000；#336699；简化为color:#369;

font：一、至少需指定font-size和font-family；二、缩写时font-size和line-height中间要加入/斜杠。

五、颜色

一、color：red；

二、color：rgb（133，45，200）；

三、color：rgb（20%，33%，25%）；

四、color：#00ffff；

六、长度值（px、em、%（都是相对单位））

一、像素；

二、em：它是给定字体的font-size值，若是元素的font-size为14px，则1em=14px；（注：若font-size设置单位为em，则此时计算的标准是父元素的font-size为基础）；

三、百分比：行高为字体的1.3倍；

p{font-size:12px;line-height:130%}

八、水平居中：

行内元素：被设置元素是文本、图片等行内元素时，居中是经过给父元素（外层包裹的标签）设置text-

align：center实现的；

块状元素：这时用text-align：center就没做用了；

定宽块状元素（块状元素的宽度width为固定值）：经过左右margin值为auto实现居中；

不定宽块元素（块状元素的宽度width不固定；好比网页上的分页导航：由于分页的数量是不肯定的，因此不能经过设置宽度设置它的弹性）：

A、加入table标签（table的长度是根据其内文本长度决定，因此能够当作一个定宽度的块状元素，再设置定宽度块状居中的margin的方法）：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

B、设置display：inline方法：与第一种相似，显示类型设置为行内元素，进行不定宽元素的属性设置：比较第一种，不用增长无语义标签，可是也会存在将display设置为inline变为行内元素，因此少了一些功能，好比设定长度值；

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

C、设置position：relative和left：50%：利用相对定位方式，将元素向左偏移50%，达到居中目的（这个在下一篇博客讲）；

九、垂直居中：

A、父元素高度肯定的单行文本：

设置父元素的height和line-height（行与行之间基线间的距离）高度一致来实现。line-height与font-size计算值的差，在css中成为“行间距”，分为两半，分别加到一个文本行内容的顶部和底部。

弊端：文字内容长度大于块的宽时，就有内容脱离了块。

<div class="container">
    hi,imooc!
</div>
<style>
.container{
    height:100px;
    line-height:100px;
}
</style>

B、父元素高度肯定的多行文本（两种方法）

方法1、插入table标签（包括tbody、tr、td），同时设置竖直居中属性：vertical-align：middle对于inline-block类型的子元素都有用（td标签默认状况下就默认设置了vertical-align为middle）；

方法2、兼容性较差，提供参考。chrome、firefox及IE8以上的浏览器下能够设置块级元素的display为table-cell（表格单元显示），激活vertical-align属性，但注意IE六、7并不支持这个格式，并且这样会破坏原有的块状元素的性质，可是不用增长无心义标签。

<div class="container">
    <div>
        <p>看我是否能够居中。</p>
        <p>看我是否能够居中。</p>
        <p>看我是否能够居中。</p>
    </div>
</div>
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

十、Css中的隐性改变display类型方法：

当为元素设置下面2句之一（display：none）：一、position：absolute；二、float：left或float：right；元素的display就会自动变为display：inline-block（块状元素）的方式显示，固然能够设置元素的width和height了，且默认宽度不占满父元素。

Eg：a是行内元素，so设置width是没效果的，可是设置position：absolute后，就能够了。

<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>