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. PMP考试相关

    知识点:http://www.cnblogs.com/allenblogs/tag/PMbook/ 读书笔记: http://www.cnblogs.com/lensin/category/45538 ...

  2. 开发还是应该使用linux

    这几天在Windows系统下,安装了几个IDE,体量大,4.5个G,启动速度慢,占用系统资源多,并且最难受的是,这些IDE的限制性太强,只能按照UI给定的规则来操作,例如现在手中有一个已完成的项目,用 ...

  3. MyBatis入门程序之mapper映射文件常用配置命令

    1.ResultMap高级结果映射 如果查询出的列名和属性名不一致,可以通过ResultMap做映射,放在statement的输出类型中 如下: 2.动态SQL,使用各种动态标签实现动态拼接sql,常 ...

  4. junit的简单用法

    之前测试一个方法总要写一个main函数来调用,感觉既费事又有点low.今天来简单研究一下怎么使用junit来进行单元测试. 1. 依赖包 <dependency> <groupId& ...

  5. 使用dshow抓取摄像头数据时，回调函数时间为0的问题

    在使用dshow抓取摄像头数据,调用dshow的回调函数,如果发现SampleTime一直为0,如下图 那极有可能是使用RenderStream函数连接Filter时,指定的第一个参数为 PIN_CA ...

  6. Selenium 延时等待

    在 Selenium 中, get() 方法会在网页框架加载结束后结束执行,此时如果获取 page_source ,可能并不是浏览器完全加载完成的页面: 如果某些页面有额外的 Ajax 请求,我们在网 ...

  7. Unity Animation需要Inspector右键打开Debug模式，然后勾选Legacy，最后再Inspector右键打开Normal

  8. ubuntu MySQL采用apt-get install安装目录

    一). ubuntu下mysql安装布局: /usr/bin                      客户端程序和mysql_install_db /var/lib/mysql            ...

  9. N76E003的学习之路（一）

    N76E003是8051内核的一款单片机MCU,它提供丰富的特殊功能模块,包括: 1KRAM其中包括256字节SRAM,768字节XRAM. 最多可达18个标准管脚. 两组标准16位定时器/计数器:定 ...

  10. Android源码中中一种常见的struct使用方法

    直接看例子: #include<iostream> #include<stdlib.h> using namespace std; struct Base{ int ba; i ...