CSS框模型，看似一个盒子，封装周围的HTML元素，包括：边距、边框、填充和实际内容
Margin：清除边框区域，没有背景色，完全透明
Border：边框周围的填充和内容，边框是受到盒子的背景色影响
Padding：清除内容周围的区域，会受到框中填充的背景颜色影响
Content：盒子的内容，显示文本和图像
指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，要知道，完全大小的元素，你还必须添加填充，边框和边距。
div.ex{
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 5px;
}

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框属性：允许指定一个元素边框的样式和颜色
border-style边框样式：指定显示什么样的边界
dotted:点线边框
dashed:虚线框
solid:实线框
double:定义两个边界框
groove:3D沟槽边界
ride:3D脊边界
inset:3D嵌入边框
outset:3D突出边框

border-width边框宽度
指定宽度的两种方法：1）指定值，如1px、1em；2）使用3个关键字之一，thin,medium,thick

border-color边框颜色

单独设置边框：指定不同的侧面不同的边框
border-top-style: groove;
border-right-style: solid;
border-bottom-style: groove;
border-left-style: solid;

也可以一次设置单一属性：border-style:dotted solid double dashed;
border-style有四个值，分别表示上、右、下、左四个位置

outline:用于绘制元素周围的一条线，位于边框边缘的外围

分组和嵌套
样式表中有很多具有相同样式的元素，可以将这些分配到一个组里面。使用分组选择器，每个选择器用逗号分开。
h1,h2,p
{
color:green;
}

嵌套选择器：选择器内部的选择器样式
在下面的例子，为所有p元素指定一个样式，为所有元素指定一个class="marked"的样式，并仅用于class="标记"，类内的p元素指定第三个样式
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

CSS显示（display）与可见性（visibility）
visibility属性指定一个元素可见或隐藏，但是仍然会影响格局
{visibility: hidden}
display:没有隐藏的元素，不会占用任何空间
{display: none}

Positioning定位：为一个元素定位，要首先设定position的属性，有四种不同的定位方法
Static定位：HTML的默认定位，即没有定位，元素出现正常流中，不会受到top,bottom,left,right影响
Fixed定位：元素的位置相对于浏览器窗口是固定的位置，窗口的滚动他也不会移动
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

Relative定位：相对定位元素的定位是相对其正常位置
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Absolute定位：绝对定位的元素的位置相对于最近的已定位父元素，如果没有已定位的父元素，则它的位置相对于<html>
h2
{
position:absolute;
left:100px;
top:150px;
}

11.21 CSS学习-下午的更多相关文章

  1. 11.21 CSS学习-上午

    font-family:设置文本的字体序列,应当多设置几个,作为后备机制,如果浏览器不支持第一种字体,它将尝试下一种字体.字体序列的名字超过一个字需要使用引号,多个字体序列用逗号分隔指明:{font- ...

  2. 11个实用的CSS学习工具

    1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...

  3. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  4. [转]CSS学习笔记

    原文:http://www.fx114.net/qa-266-93710.aspx 01.什么是CSS.    CSS指层叠样式表(Cascading Style Sheets).    ·样式定义如 ...

  5. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  6. CSS学习笔记：溢出文本省略（text-overflow）

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  7. CSS：CSS学习总结

    CSS:CSS学习总结 背景 CSS是一种声明式的语言,学好CSS的难度甚至大于学好一门服务器语言(我个人的感觉),这周在学习CSS,就记录一下学习经验. 1.规则声明顺序 因为CSS的样式具备层叠性 ...

  8. HTML&CSS 学习网站收藏【转】

    转自:http://lab.linxz.de/some_url.html html & CSS http://www.adobe.com/devnet/html5/articles/css3- ...

  9. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

随机推荐

  1. IIS------如何占用80端口

    如何占用80端口 请看我的一篇随笔: https://www.cnblogs.com/tianhengblogs/p/9292347.html

  2. SpringMVC由浅入深day02_8json数据交互

    8 json数据交互 8.1 为什么要进行json数据交互 json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据 ...

  3. 7代CPU安装win7的方法

    7代CPU安装win7会遇到的问题: 32位的win7不支持uefi启动,64位win7理论上支持uefi启动,但实际上需要开启兼容模式才能启动,并且启动速度并没有变快. 根据不同型号的主板,需要解决 ...

  4. CentoOS6.6安装netcat

    http://blog.csdn.net/u013673976/article/details/47084841 CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态.在使用 ...

  5. 发现linux主机再用代理上网的情况下不能用wget从外网下载资源

    公司禁网(也不是完全禁,能连接外网数据库,不能下载东西,不能打开网页,但是却能打开谷歌的收索页面,只是不能点进网页) 发现linux主机再用代理上网的情况下不能用wget从外网下载资源,但是却可以从内 ...

  6. 【swoole2.0】 PHP + swoole2.0 初体验

    背景: centos7   PHP7.1   swoole2.0 准备工作: 一.  swoole  扩展安装 1 下载swoole cd /usr/local wget -c https://git ...

  7. 使用IBM SVC构建vSphere存储间集群

    使用IBM SVC构建vSphere存储间集群 本文目的 本文描述利用IBM SVC来构建Vsphere 存储间集群 解决方案 什么是vMSC? vShpere存储间集群是一个针对VmwarevSpe ...

  8. Volley overview

    https://developer.android.com/training/volley/   需FQ https://developer.android.google.cn/training/vo ...

  9. Free Download Manager (FDM) 中文版 - 替代迅雷最佳免费开源下载工具软件

    https://www.freedownloadmanager.org/ Free Download Manager (FDM) 是一款经典免费纯粹的下载软件,它开源无广告,界面简洁清爽,支持 BT. ...

  10. 题目1004：Median（qsort函数自定义cmp函数）

    题目链接:http://ac.jobdu.com/problem.php?pid=1004 详解链接:https://github.com/zpfbuaa/JobduInCPlusPlus 参考代码: ...