6、设置颜色单位

L    普通英文单词 {color : 属性值red;}

此方法简单,便捷。但设置的颜色在不同浏览器中,可能显示的颜色出现差异

* 三原色 - 红、绿、蓝

L   颜色的八进制方式

格式:rgb(数字,数字,数字),数字范围是0 ~ 255  r红色g绿色b蓝色

L      颜色的十六进制方式

格式:#红色绿色蓝色,范围是00 ~ FF   eg: #ff0000或#f00

7、伪类

作用:为<a>元素添加样式

:link - 设置链接元素未访问的样式          :visited - 设置链接元素访问后的样式

:hover - 设置鼠标悬停链接元素的样式       :active - 设置鼠标选中链接元素的样式

* text-decoration: none;  即去掉链接元素自带的下划线

<a>实现按钮的效果          格式:<a href="#">按钮</a>

Eg:  a {

text-decoration: none;   order: 1px solid lightslategrey;

padding: 5px 10px;     background-color: lightgray;

}

伪元素

:before向指定元素添加第一个子元素(不是真正的子元素),通过为添加的第一个子元素设置指定的样式

:after 向指定元素添加最后一个子元素

8、盒子模型

作用:实现HTML的页面布局     (所有HTML元素可以看作盒子)

它包括: 内容区(content)  内边距(padding)  边框(border)   外边距(margin)

i 边框(border):

border-bottom(下边框)  border-left(左边框)  border-right(右边框)  border-top(上边框)

* 只设置边框的宽度,未设置边框的颜色和样式 - 没有任何效果

* 设置边框的宽度和颜色,未设置边框的样式 - 没有任何效果

* 设置边框的颜色和样式 - 边框的宽度具有一个默认值

【设置边框,必须同时设置边框宽度、颜色和样式(与顺序无关) 】

格式:第一种:分别单独写;

eg:  border-width: 数字px;border-color: 颜色; border-style:样式;

第二种:合并写(简写属性);

eg:  border:宽度 颜色 样式 ;

盒子模型的边框对页面布局的影响

显示的实际宽度 = width + border-left-width + border-right-width

显示的实际高度 = height + border-top-width + border-bottom-width

²   边框宽度(px)

(1)分四个情况:

设置一个值:同时设置四个边框的宽度;

设置两个值:上下边框 左右边框;

设置三个值:上边框 左右边框 下边框;

设置四个值:上边框 右边框 下边框 左边框 (顺时针方向);

(2)分四个方向

border-top-width; border-right-width; border-bottom-width; border-left-width;

² 边框样式

none无边框;    solid实线;    double 双实线;    dashed 虚线;    dotted点状框

² 边框颜色   border-color

* 内边距(padding)

定义:元素边框与元素内容之间的距离    [简写属性]

* 外边距(margin)

定义:边框到页面的边缘距离(不会影响元素的可见大小,但影响元素位置)[简写属性]

元素在 HTML页面中默认是靠左靠上显示的。默认情况下,修改左外边距和上外边距时,会影响当前元素的位置。

* 影响自身元素的位置:margin-top   margin-left

* 影响相邻元素的位置:margin-right  margin-bottom

² 外边距重叠

上一个元素设置下外边距,下一个元素设置上外边距。(相邻兄弟关系)

结果:垂直方向的相邻的外边距会发生重叠现象,则外边距会取两者中的【最大值】;

且重叠现象只会出现在垂直方向,而水平方向则不可。

解决:只设置其中一个的外边距

² 外边距负值

下一个元素上周上外边距为负值,     结果:下一个元素会覆盖上一个元素

元素设置左外边距设为负值,则向相反方向移动     结果:当前元素移出页面

² 外边距传递

子元素设置(上外边距),此操作会传递给父元素。 解决:设置为父元素的(上内边距)

*子元素在父元素居中

(1)父元素用padding,此法会在原有大小添加内边距,改变大小

(2)子元素用margin,此法仅是左右居中

上下居中:子元素height + 父元素padding-top =父元素height

左右居中:子元素margin-left = (父元素-子元素)width 的一半

  • Ø 行内元素的盒子模型

行内元素设置width和height无效;且显示的宽度和高度取决于文本内容

属性设置时:边框有效;内边距有效;外边距左右有效,【上下无效】;

  • Ø 盒子模型分类

box-sizing属性:

* content-box ---默认盒子模型   实际的宽度 = width + border + padding

* border-box ---怪异盒子模型    实际的宽度 = width

注:原本设置的宽高,若是默认盒子模型,在原有宽度、高度的基础增加边框和内边距,使得宽度增大;而怪异盒子模型,它是向里扩展,使得原有设置的宽度

CSS基础知识(颜色、伪类、盒子模型)的更多相关文章

  1. HTML+CSS基础知识(2)选择器的使用、盒子模型的讲解、列表的使用

    文章目录 1.CSS基础知识 2.css样式 2.1.代码: 2.2 测试结果 3.CSS的语法 3.1 代码 4.块元素和行内元素 4.1 代码 4.2 测试结果 5.常用的选择器 5.1 代码块 ...

  2. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  3. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  4. css知多少(7)——盒子模型

    1. 引言 从这一节开始,我们就进入本系列的第三部分——css呈现.本部分将描述css在页面的几种布局和呈现的特性.包括两类:文字.块. 第一类——文字.这部分相对比较简单一些,例如设置字号.字体.颜 ...

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. CSS基础知识筑基

    01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...

  8. (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  9. DIV+CSS专题:第一天 XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

  10. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

随机推荐

  1. spring MVC上传附件

    spring mvc为我们封装了十分简单的上传附件的方法,以下通过一个例子学习. 1.jsp <%@ page language="java" contentType=&qu ...

  2. 在servlet中使用@Autowired注解无法注入实例的问题

    今天在项目中碰到了一个奇怪的问题,原来的servlet中使用了HttpsWxService httpsWxService = new HttpsWxService()这一句代码,然后再HttpsWxS ...

  3. 这么说吧,java线程池的实现原理其实很简单

    好处 : 线程是稀缺资源,如果被无限制的创建,不仅会消耗系统资源,还会降低系统的稳定性,合理的使用线程池对线程进行统一分配.调优和监控,有以下好处: 1.降低资源消耗: 2.提高响应速度: 3.提高线 ...

  4. Java之数据类型,变量赋值

    Java中的基础数据类型(四类八种): 1.整数型 byte----使用byte关键字来定义byte型变量,可以一次定义多个变量并对其进行赋值,也可以不进行赋值.byte型是整型中所分配的内存空间是最 ...

  5. go实例之线程池

    go语言使用goroutines和channel实现一个工作池相当简单.使用goroutines开指定书目线程,通道分别传递任务和任务结果.简单的线程池代码如下: package main impor ...

  6. 算法分析| 小o和小ω符号

    渐近分析的主要思想是对不依赖于机器特定常数的算法的效率进行测量,主要是因为该分析不需要实现算法并且要比较程序所花费的时间. 我们已经讨论了三个主要的渐近符号.本文我们使用以下2个渐近符号表示算法的时间 ...

  7. 解决linux重启后无法开启nginx问题“var/run/nginx/nginx.pid" no such file or directory问题

    起因:每次重启虚拟机后,var/run/nginx/目录都会被删除,所以无法在这个目录创建nginx.pid文件, 可以自己创建var/run/nginx/目录,然后可以运行,但治标不治本,下次虚拟机 ...

  8. BLE抓包是怎么回事儿?

    BLE抓包 在进行网络开发的时候,抓包是一个很重要的调试过程,通过抓包可以分析网络传输的数据是否正确,可以深入理解网络传输过程.在物联网开发中,BLE低功耗蓝牙技术是一种非常通用的网络传输方式.在学习 ...

  9. Nodejs的运行原理-架构篇

    前言 本来是想只做一个Nodejs运行原理-科普篇,但是收到了不少私信,要我多分享一些更进阶,更详细的内容,所以我会在接下来的两个月里继续更新Nodejs运行原理. PS:此系列只做Nodejs的运行 ...

  10. 解决SVN造成的桌面图标问号

    之前不小心直接将版本库 的内容检出 到桌面,后才发现桌面上的文件 都变成了问号,本来也以为没有多大问题,删除.svn 即可,可是删除所有的.svn后,桌面上还是显示问号,刷新了很多次,还重启电脑 了, ...