文档章节

HTML+CSS基础

rabbit_mom
 rabbit_mom
发布于 2016/12/09 17:42
字数 1854
阅读 48
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

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

    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基础
下一篇: C# DataTable
rabbit_mom
粉丝 3
博文 25
码字总数 12119
作品 0
程序员
私信 提问
加载中

评论(0)

零点起飞学HTML+CSS (顼宇峰) PDF扫描版

零点起飞学HTML+CSS系统地介绍了网站制作中各种常用的HTML标签和CSS属性,以及网站各个部分和各种布局的实现方法,还提供了大量实例来引导读者学习,力求让读者获得真正实用的知识。本书涉及...

osc_hvwwf78n
2018/04/16
1
0
北京东方网力诚聘HTML+CSS,Rails,js,as,java程序员

北京东方网力公司(http://www.netposa.com)诚聘HTML+CSS前端设计人员,Rails程序员,javascript程序员,actionscript程序员,java程序员等进行企业软件开发,包括办公自动化、项目管理、视频会议...

Imy
2011/02/13
458
0
html+css实现坦克大战游戏简单布局

html+css实现坦克大战游戏简单布局 一、总结 一句话总结:找好素材。 1、如何实现通过键盘让坦克移动? 通过event对象的keyDode 68 $(window).keydown(function(event){69 ek=event.keyCode;...

osc_t1c07j7r
2018/06/14
4
0
【备忘】2017最新妙味课堂VIP视频教程全套 无加密

下载地址 http://www.ai998.cn/thread-1107-1-1.html 【备忘】2017最新妙味课堂VIP视频教程全套 无加密 课程大纲 01:PhotoShop基础 02:代码入门篇 03:HTML5基础 04:HTML5高级 05:HTML+...

qq_38155396
2017/08/30
0
0
iOS 流式布局 UI 框架 CocoaUI 开源了!

CocoaUI 是一个强大的 iOS UI 框架,使用 Web 开发者熟悉的 HTML+CSS 流式布局方式,轻松地开发 iOS 原生 App 的界面。CocoaUI 的特性主要包括: 高效的原生界面, 非低效的 WebView 控件方式...

ideawu
2015/06/17
1.2W
9

没有更多内容

加载失败,请刷新页面

加载更多

Go Gin 简明教程

https://geektutu.com/post/quick-go-gin.html

Java搬砖工程师
20分钟前
13
0
中台建设-中台概述

一,什么是中台 ①,中台是能力的共享和沉淀, ②,中台是为前台服务的,有了中台,可快速构建前台应用. 二,为什么建设中台 ①,能力共享和沉淀,避免烟囱似建设 ②,快速搭建前台. 3,怎么建设中台...

Original123
22分钟前
15
0
如何更改远程Git存储库的URI(URL)? - How to change the URI (URL) for a remote Git repository?

问题: I have a repo (origin) on a USB key that I cloned on my hard drive (local). 我在硬盘驱动器(本地)上克隆的USB密钥上有一个回购(来源)。 I moved "origin" to a NAS and succ......

技术盛宴
35分钟前
26
0
连接热点的电脑能注册到开热点电脑的注册中心,但是网关不能路由到服务实例

类似问题描述 1.连接热点的电脑能注册到开热点电脑的注册中心,但是网关不能路由到服务实例。2.微服务注册到到Eureka注册中心的ip不正确,导致网关路由不到具体为服务实例。3.Eureka注册...

LoSingSang
39分钟前
14
0
利用flask部署keras模型报错

利用flask部署keras模型时报错: Tensor("dense_2/Softmax:0", shape=(?, 26), dtype=float32) is not an element of this graph. 解决方法 import tensorflow as tfgraph = tf.get_default......

hc321
48分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部