文档章节

HTML+CSS基础

rabbit_mom
 rabbit_mom
发布于 2016/12/09 17:42
字数 1854
阅读 42
收藏 0
点赞 1
评论 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>

    

© 著作权归作者所有

共有 人打赏支持
rabbit_mom
粉丝 2
博文 25
码字总数 12119
作品 0
程序员
iOS 流式布局 UI 框架 CocoaUI 开源了!

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

ideawu ⋅ 2015/06/17 ⋅ 9

【备忘】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

Python学习之路和我发布过的Python脚本博文前端项目

Python学习之路 目录 Python学习之路【第一篇】:流程控制,用户交互,语法要求,变量,字符,注释,模块导入的使用 Python学习之路【第二篇】:文件,字符串,列表,元组,字典,集合的使用 Python学习...

yht_1990 ⋅ 2016/07/17 ⋅ 0

基于Svg的图表组件库--KCharts

KCharts是基于Svg的图表组件库,兼容IE6+等主流浏览器。基于淘宝js框架KISSY的图表组件库,包含折线图、曲线图、柱状图、散点图、饼图、地图等常用图表。采用kissy的模块加载器,实现按需加载...

红薯 ⋅ 2014/01/20 ⋅ 0

KCharts 1.3 发布,来自淘宝的JS图表库

KCharts 1.3正式发布 官方地址:http://kcharts.net 源码地址:https://github.com/kissygalleryteam/kcharts KCharts是基于Svg的图表组件库,兼容IE6+等主流浏览器。基于淘宝js框架KISSY的图...

huxiaoqi ⋅ 2014/01/19 ⋅ 11

如何成为一个web前端, 怎样系统的去学习! [A篇]

     html+css、java、mysql、php、xml、http协议、WebService、linux系统      俗话说的好,冰冻三尺并非一日之寒。如果你能静下心来慢慢的看完我写的以下文章,会对你想要学习或者...

编程开拓者 ⋅ 2016/12/01 ⋅ 0

line-height属性遇到的问题

最近在学习html+css基础,这两天在编写页面的时候,发现有时候使用line-height属性,会变成行间距变的很大的情况,在这里写下总结,由于电脑系统过于low,有些图片就稍后在附加,进入正题: ...

BULLEPAO ⋅ 2017/06/18 ⋅ 0

WEB前端工程师-练成

一、HTML和CSS基础 1.1 开发工具 1.1.1 前端开发工具技巧介绍-DW篇 1.1.2 前端开发工具技巧介绍-Sublime篇 1.2 HTML和CSS基础课程 1.2.1 HTML+CSS基础课程 1.3 网页布局 1.3.1 如何用CSS进行...

霞女 ⋅ 2015/12/02 ⋅ 0

JavaScript进阶1-1

让你认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面而已...

SVD ⋅ 2016/09/24 ⋅ 0

Vue学习曲线

vue如今已是前端最火热的框架技术之一了,如何从0到掌握vue技术,在此介绍一下学习曲线和途径。 前端入门 以下是前端基础语言推荐的学习链接(过完一片后可以作为参考手册使用) html css js 另...

iceuncle ⋅ 2017/11/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

开启Swarm集群以及可视化管理

在搭建的两台coreos服务器上开启swarm集群 前置条件: docker均开启2375端口 同一个局域网内 主服务器上安装Portainer容器 安装Portainer容器执行: docker run -d -p 9000:9000 --restart=a...

ykbj ⋅ 29分钟前 ⋅ 0

单例设计模式

1、单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例 2、饿汉式单例类 在这个类被加载时,静态变量instance会被初始化,此时类的私有构造子会被调用 饿汉式是典型...

职业搬砖20年 ⋅ 34分钟前 ⋅ 0

前端基础(四):前端国际规范收集

字数:1142 阅读时间:5分钟 前言 由于前端技术的灵活性和杂乱性,导致网上的许多解决方案不够全面甚至是完全错误,容易起到误导作用。所以,我对搜索到的解决方案往往是存疑态度。那么,如何...

老司机带你撸代码 ⋅ 36分钟前 ⋅ 0

Failed to open/create Network-VirtualBox Host-Only

虚拟机版本 : Oracle Vm VirtualBox 5.2.12 报错时机:开网卡二,重启虚拟机报错 "Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Ada......

p至尊宝 ⋅ 39分钟前 ⋅ 0

三分钟学会如何在函数计算中使用 puppeteer

摘要: 使用 puppeteer 结合函数计算,可以快速的构建弹性的服务完成各种功能,包括:生成网页截图或者 PDF、高级爬虫,可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网...

阿里云云栖社区 ⋅ 42分钟前 ⋅ 0

springMVC接收表单时 Bean对象有Double Int Char类型的处理

前台ajax提交表单price为double类型 后台controller就介绍不到 400错误 前台 实体类: public class ReleaseMapIconConfig{ private String id; private long maxValue; private long minVal......

废柴 ⋅ 45分钟前 ⋅ 0

ZOOKEEPER安装

工作需要在ubuntu上配置了一个zookeeper集群,有些问题记录下来。 1. zookeeper以来java,所以首先要安装java。但是ubuntu系统有自带的jdk,需要通过命令切换java版本: $ sudo update-alter...

恰东 ⋅ 48分钟前 ⋅ 0

linux 进程地址空间的一步步探究

我们知道,在32位机器上linux操作系统中的进程的地址空间大小是4G,其中0-3G是用户空间,3G-4G是内核空间。其实,这个4G的地址空间是不存在的,也就是我们所说的虚拟内存空间。 那虚拟内存空间...

HelloRookie ⋅ 48分钟前 ⋅ 0

myatis #{}与${}区别及原理

https://blog.csdn.net/wo541075754/article/details/54292751

李道福 ⋅ 51分钟前 ⋅ 0

三分钟学会如何在函数计算中使用 puppeteer

摘要: 使用 puppeteer 结合函数计算,可以快速的构建弹性的服务完成各种功能,包括:生成网页截图或者 PDF、高级爬虫,可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网...

猫耳m ⋅ 52分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部