HTML第六章 盒子模型
什么是盒子模型:
(1)边框;
(2)内边距;
(3)外边距;
(4)元素内容·;
(5)背景色·;
边框:
属性:
颜色(border-color),粗细(border-width),样式(border-style)。
border-color属性设置方法:
属性 说明
border-top-color 设置上边框颜色
border-right-color 设置右边框颜色
border-bottom-color 设置下边框颜色
boder-left-color 设置左边框颜色
border-color 设置四个边框为同一种颜色
border-width属性设置方法:
属性 说明
border-top-width 设置上边框粗细
border-right-width 设置右边框粗细
border-bottom-width 设置下边框粗细
border-left-width 设置左边框粗细
border-width 设置四个边框同粗细
border-style属性设置方法:
属性 说明
border-top-style 设置上边框实线
border-right-style 设置右边框实线
border-bottom-style 设置下边框实线
border-left-style 设置左边框实线
border-style 设置四个边框都为实线
外边距:
外边距属性设置方法:
属性 说明
margin-top 设置上外边距
margin-right 设置右外边距
margin-bottom 设置下外边距
margin-left 设置左外边距
margin 设置四个外边距
内边距:
内边距属性设置方法;
属性 说明
padding-left 设置左内边距
padding-right 设置右内边距
padding-top 设置上内边距
padding-bottom 设置下内边距
padding 设置四个内边距
HTML第六章 盒子模型的更多相关文章
- html (第四本书第六章盒子模型参考)
上机1 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- (转)iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(2)
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第六章译文精选的第二部分,其余章节将陆续放出.上一 ...
- (转)iOS Wow体验 - 第六章 - 交互模型与创新的产品概念(1)
本文是<iOS Wow Factor:Apps and UX Design Techniques for iPhone and iPad>第六章译文精选,其余章节将陆续放出.上一篇:Wow ...
- HTML网页设计基础笔记 • 【第7章 盒子模型】
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...
- html学习第三天—— 第11章 盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- Ruby on Rails Tutorial 第六章 用户模型
1.用户模型(1)数据库迁移Rails默认使用关系数据库存储数据,数据库中的表有数据行组成,每一行都有相应的列,对应数据属性.把列名命名为相应的名字后,ActiveRecord会自动把他们识别为用户对 ...
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
- 【黑金原创教程】【TimeQuest】【第六章】物理时钟与外部模型
声明:本文为黑金动力社区(http://www.heijin.org)原创教程,如需转载请注明出处,谢谢! 黑金动力社区2013年原创教程连载计划: http://www.cnblogs.com/al ...
随机推荐
- Codeforces Round #568 (Div. 2)A
A. Ropewalkers 题目链接:http://codeforces.com/contest/1185/problem/A 题目: Polycarp decided to relax on hi ...
- Fish and Oh My Fish in Ubuntu
After install Fish shell, then install Oh My Fish . Oh My Fish(shortly OMF) can make our Fish shell ...
- Apicloud 接入海康摄像头
1准备工作 , 加载apicloud 海康视频模块. 引入 SDK 重新生成项目测试 再config.xml写入appid 话不多说直接上代码 video=api.require("haik ...
- GitLab安装后修改IP/域名
gitlab版本: 10.8.7 默认安装完成后,创建的项目地址为git@www.gitlab.com:xxx.git,还需DNS解析.避免麻烦直接配置成IP地址 解决方法: 1.进入安装目录 cd ...
- C++ luogu1352没有上司的舞会 from_树形DP
luogu1352没有上司的舞会 分析(树形DP模板题): 没学树形DP的,看一下. 把该题抽象到一颗树中,设i的下属就是他的儿子,则有两种情况: 如果i参加,他的儿子就不能参加. 如果i不参加,他的 ...
- 前端笔记之React(四)生命周期&Virtual DOM和Diff算法&日历组件开发
一.React生命周期 一个组件从出生到消亡,在各个阶段React提供给我们调用的接口,就是生命周期. 生命周期这个东西,必须有项目,才知道他们干嘛的. 1.1 Mouting阶段[装载过程] 这个阶 ...
- django基础知识之管理静态文件css,js,images:
管理静态文件 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义静态内容 STATIC_URL = '/static/' STATICFILES_DIRS = [ o ...
- Innovus教程 - Flow系列 - MMMC分析环境的配置概述(理论+实践+命令)
本文转自:自己的微信公众号<集成电路设计及EDA教程> <Innovus教程 - Flow系列 - MMMC分析环境的配置概述(理论+实践+命令)> 轻轻走过,悄悄看过,无 ...
- linuxprobe培训第2节课笔记2019年7月6日
使用VM虚拟机配置RHEL实验环境. 鉴于在笔记本上装过centos7,这章内容难度对我来说不是很大. 重置root管理员密码(RHCSA考题,第一题,做不出来无法进行下一步考试) e linux16 ...
- C#常用正则表达式回顾
项目中有些时候需要用到正则表达式,但是自己对正则表达式不熟悉,每次学习完,过一段时间(长时间)不用,就又忘了,每次需要用到的时候都需要百度下,比较麻烦,这里把C#中经常用到的正则表达式做下总结. 正则 ...