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. js中的string.format

    String.prototype.format = function(args) { var result = this; if (arguments.length > 0) { if (arg ...

  2. SpringMVC由浅入深day01_7入门程序小结

    7 入门程序小结 通过入门程序理解springmvc前端控制器.处理器映射器.处理器适配器.视图解析器用法. 前端控制器配置: 处理器映射器: 非注解处理器映射器(了解) 注解的处理器映射器(掌握) ...

  3. System.exit(0)会跳过finally块的执行

    public class test { public static void main(String[] args) { try { System.exit(0); System.out.printl ...

  4. PHP代码审计笔记--代码执行漏洞

    漏洞形成原因:客户端提交的参数,未经任何过滤,传入可以执行代码的函数,造成代码执行漏洞. 常见代码注射函数: 如:eval.preg_replace+/e.assert.call_user_func. ...

  5. LNMP 简介

    LNMP 代表的就是:Linux 操作系统下,Nginx + MySQL + PHP 这种网站服务器架构 工作流程:Nginx 直接处理静态请求,动态请求会转发给 php-fpm ( php 是作为一 ...

  6. Linux IPC BSD Pipe

    mkfifo() //创建有名管道(FIFO special file),创建完了就像普通文件一样open(),再读写,成功返回0,失败返回-1设errno.VS$man 3 mkfifo #incl ...

  7. 【技术分享会】 iOS开发简述

    前言 Objective-C(简称OC)也是面向对象的编程语言,运用的许多面向对象的编程思想和C# . Java .C++等变成语言都是相通的: 本次技术讲座主要讲一些设计模式.设计思想等计算机语言通 ...

  8. Ubuntu14.04安装CMake3.0.2

    http://blog.csdn.net/wz3118103/article/details/39826397 .去网址下载http://www.cmake.org/download/ Platfor ...

  9. Oracle —— 如何执行SQL文件

    在Command模式下(笔者使用的是 PL/SQL Comand Window),输入 @文件路径\文件名 如: @D:\ORA_SQL\INSERT_SQL.sql

  10. Ajax技术(WEB无刷新提交数据)

    (转自:http://www.jb51.net/article/291.htm) Ajax内部交流文档一.使用Ajax的主要原因 1.通过适当的Ajax应用达到更好的用户体验: 2.把以前的一些服务器 ...