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. Images.xcassets 的简单使用

    总结起来Images.xcassets 就这么几句话 (1)以下開始简单整理 进入images.xcassets 右键--->New Image Set 或者点XCode的images.xcas ...

  2. JAVA WEB ------ 文件下载及导出数据到office Execl表格

    文件下载需要五步: 1.设置文件ContentType类型 // 设置文件ContentType类型,这样设置,会自动判断下载文件类型 response.setContentType("mu ...

  3. vue中使用mockjs

    第一步安装mockjs:npm i mockjs -S 在src目录下新建mock文件夹,文件夹添加test.js test.js内容如下: import Mock from 'mockjs'; co ...

  4. Websphere安装配置与项目部署

    0x01 下载安装 1.在IBM官网下载安装包 打开下载地址,需注册账户,登录后,选择Windows 64-bit下载 2.解压缩,运行install.exe文件 3.输入刚才注册的用户名和密码,并输 ...

  5. code_blocks 使用操作手册

                                                                              38 39 编译以上程序,产生如下提示信息. 如此简 ...

  6. Qt——文件对话框

    教程:https://www.devbean.net/2012/09/qt-study-road-2-file-dialog/ 代码如下: //mainwindow.h #ifndef MAINWIN ...

  7. 解决neo4j @Transactional 与Spring data jpa @Transactional 冲突问题,@CreatedBy,@CreatedDate,@LastModifiedBy,@LastModifiedDate,以及解决@Version失效问题

    之前mybatis特别流行,所以前几个项目都是用@SelectProvider,@InsertProvider,@UpdateProvider,@DeleteProvider 加反射泛型封装了一些通用 ...

  8. 高效使用github

    下面两个资料是我在github上面整理出来的repo,不断进行更新,将遇到的有帮助的文章尽量整理到上面,方便初学者也方便回顾学习.如果恰好你也有一些资料文章,欢迎fork - modify - pul ...

  9. 【Mybatis】Mybatis元素生命周期

    一.SqlSessionFactoryBuilder SqlSessionFactoryBuilder是利用XML或者Java编码获得资源来构建SqlSessionFactory的,通过它可以构建多个 ...

  10. 【Spring Boot&& Spring Cloud系列】单点登录SSO概述

    概念 单点登录(Singleton Sign On),简称为SSO,是目前比较流行的企业业务整合的解决方案之一.SSO的定义是在多个应用系统中,用户只需要登录一次就能访问所有相互信任的应用系统. 也就 ...