HTML+CSS基础
HTML+CSS基础
rabbit_mom 发表于1年前
HTML+CSS基础
  • 发表于 1年前
  • 阅读 40
  • 收藏 0
  • 点赞 1
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

    几个月之前学过一段时间的前端,工作原因都忘的差不多了,现在重温一下,总结一些基础的知识点。

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

     css包含三种基本的布局模型:1、流动(Flow)2、浮动(Float)3、层(Layer)

     块级元素:div、p、h1、form、ul、li。设置display:block就是将元素显示为块级元素,具备块状元素的特点。

     块级特点:1、每个块级元素都从新的一行开始,并且其后的元素也另起一行(霸道);

                      2、元素的高度、宽度、行高以及顶和底边距都可设置。

                      3、元素宽度如不设置,是它本身父容器的100%(除非设置一个宽度);

     内联元素(行内元素):span、a、lable、strong、em。设置display:inline将元素设置为内联元素。

     内联特点:1、和其他元素都在一行上;

                      2、元素的高度、宽度及顶部和底边距不可设置;

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

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

     内联块状特点:1、和其他元素都在一行上;

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

1、Flow

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

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

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

2、Float

          实现两个块状元素并排显示(设置width、height和float)(设置为right的话,第一个块状元素会靠右);

3、Layer(对图层精确定位)

     绝对(absolute):将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位(若不存在就相对于body);

     相对(relative):它的完成过程是首先按static(float)方式生成一个元素(像层一样浮动),然后相对于以前的位置移动,偏移前的位置不变;

     固定(fixed):它相对移动的坐标是视图(屏幕内的网页窗口),视图本身是固定的,不随滚动条变化而变化。与background-attachment:fixed;属性相同;

     Relative与Absolute组合使用:

                                          1、参照定位的元素必须是相对定位元素的父辈元素;

                                          2、参照定位元素加入positive:relative;定位元素加入position:absolute。

4、简写:Eg:margin:10px 20px 30px 20px;

                      简化为:margin:10px 20px 30px;

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

                      font:1、至少需指定font-size和font-family;2、缩写时font-size和line-height中间要加入/斜杠。

5、颜色

     1、color:red;

     2、color:rgb(133,45,200);

     3、color:rgb(20%,33%,25%);

     4、color:#00ffff;

6、长度值(px、em、%(都是相对单位))

     1、像素;

     2、em:它是给定字体的font-size值,如果元素的font-size为14px,则1em=14px;(注:若font-size设置单位为em,则此时计算的标准是父元素的font-size为基础);

     3、百分比:行高为字体的1.3倍;

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

8、水平居中:

行内元素:被设置元素是文本、图片等行内元素时,居中是通过给父元素(外层包裹的标签)设置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%,达到居中目的(这个在下一篇博客讲);

9、垂直居中:

A、父元素高度确定的单行文本:

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

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

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

B、父元素高度确定的多行文本(两种方法)

    方法一、插入table标签(包括tbody、tr、td),同时设置竖直居中属性:vertical-align:middle对于inline-block类型的子元素都有用(td标签默认情况下就默认设置了vertical-align为middle);

    方法二、兼容性较差,提供参考。chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell(表格单元显示),激活vertical-align属性,但注意IE6、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>

10、Css中的隐性改变display类型方法:

    当为元素设置下面2句之一(display:none):1、position:absolute;2、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>

    

标签: html css
共有 人打赏支持
粉丝 3
博文 25
码字总数 12119
×
rabbit_mom
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: