新手前端笔记之--css盒子
css盒子就是它的盒模型，所有css的布局都是以此作为基础的，很有必要来详细记录一下。
1、盒子的尺寸就是margin+padding+border+content的总和，这很好理解，但令人迷惑的可能就是四个顶角是怎样产生的，可以由两个例子来看一下：
<div style="width:10px; height:10px; border:30px solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>
<div style="width:10px; height:10px; border-width:20px 30px;border-style:solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>
效果如图：
和
。从这两幅图可以看出：四个顶角的矩形是由相邻两个边框各分一半形成的。
此时如果将某些边框的颜色设为背景色或者透明，则可以形成梯形；如果在将宽和高设为0，就可以产生三角形，
<div style="width:10px;height:10px;border:15px solid #000; border-color:#f00 #fff #fff #fff;"></div>
<div style="width:0;height:0;border:15px solid #000; border-color:#f00 transparent transparent transparent;"></div>
效果如图：
和
。
2、如果没有显式的设置盒子大小，其尺寸该怎样确定呢，还是看几个例子吧：
<div style=" margin: 20px auto;width:300px; background: gray; padding: 10px;">
<p style=" background-color: Orange;">
上官云野</p>
</div>
<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
<p style=" background-color: Orange; margin: 0 -20px;">
上官云野</p>
</div>
<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
<p style=" background-color: Orange; width:100px">
上官云野上官云野</p>
</div>
效果如图：
、
、
。由图可以看出：未设置的盒子的宽度由包含它的盒子确定，原则为填满包含盒子的content。而它的高由内含的盒子确定。
3、有了以上两点知识就可以做一个圆角框了：
<div style="width:500px">
<div style="border-bottom:3px solid #cc0000; border-top-color:#cc0000; border-left:3px dotted transparent;border-right:3px dotted transparent"></div>
<div style="padding:10px 20px; color:white; font-size:14px; background:#cc0000;">上官云野！</div>
<div style="border-top:3px solid #cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent;border-right:3px dotted transparent;"></div>
</div>
。
附录：各种盒模型特点：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-type" content="Text/html;charset=utf-8">
<style type="text/css">
table{
display:inline-block;
border-collapse:collapse;
width:50px;
} table, td
{
border: 1px solid blue;
}
td{width:15px;}
.li1 li{background-color:#ccc;display:inline-block;}
.li2{background-color:#ccc;display:inline-block;}
.li3 li{background-color:#ccc;}
.li4{background-color:#ccc;}
</style>
</head>
<body>
<div style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline;">
框模型
</div>
<div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block">
框模型
</div>
<div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block">
框模型
</div>
<div style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;">
框模型
</div>
<div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;">
框模型
</div>
<p style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;">
框模型
</p>
<!--p为段落，所以前后有换行+空一行(16px;由margin指定的);而div只换行不空行-->
<p style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline-block">
框模型
</p>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<ul class="li1">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ul class="li2">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ul class="li3">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ul class="li4">
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
</html>
块级盒模型
新手前端笔记之--css盒子的更多相关文章
- 2.前端笔记之css
title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
- 前端笔记之CSS（上）
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态 ...
- 新手前端笔记之--初识css
css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...
- CSS3学习笔记(2)-CSS盒子模型
p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...
- web前端笔记整理---CSS
一 Css 文件 Css: 美化HTML的 4种选择器: 元素选择 类选择 ID选择 伪类选择 常用的布局方案 1 写在什么位置能好用. 1.1 元素里面 优先级是最高的 1.2 元素外,文件内 ...
- 前端笔记之CSS（下）浮动&BFC&定位&Hack
一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/heigh ...
- 新手前端笔记之--初识html标签
接触前端(好大气的名字啊)已经一个多月了,看了很多视频和博客,有了一定的感性认识,但还是需要总结一下以便系统化所学习的知识,就从html标签开始吧.关于标签,谈论最多的就是简洁和语义化.简洁指html ...
- 前端学习：学习笔记（CSS部分）
前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...
- 2、前端学习笔记之——css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Units are seconds since 1970.
在Android实际开发过程中常常会碰到以秒为单位的日期.这时能够依据须要将他们进行格式化处理,详细过程例如以下: long seconds=Long.parseLong("14058896 ...
- [Poi] Customize Babel to Build a React App with Poi
Developing React with Poi is as easy as adding the babel-preset-react-appto a .babelrc and installin ...
- vue27-2.0-自定义键盘事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JAVA并发--volatile
学过计算机组成原理的一定知道,为了解决内存速度跟不上CPU速度这个问题,在CPU的设计中加入了缓存机制,缓存的速度介于CPU和主存之间.在进行运算的时候,CPU将需要的数据映射一份在缓存中,然后直接操 ...
- LSTM模型
摘自:http://www.voidcn.com/article/p-ntafyhkn-zc.html (二)LSTM模型 1.长短期记忆模型(long-short term memory)是一种特殊 ...
- Debian9.5解决在root用户下启用VNC后lightdm+Xfce4只能使用root登录，其他用户无法登陆
Debian9.5解决在root用户下启用VNC后lightdm+Xfce4只能使用root登录,其他用户无法登陆 最近在研究debian9.5 VNC的问题,当VNC使用tightVNC或tiger ...
- IDEA下——Spring入门程序
创建一个Maven的项目,我的项目结构如下: 在pom文件里写下需要导入的依赖: <?xml version="1.0" encoding="UTF-8" ...
- WP8 学习笔记(002_应用程序结构)
下图是微软官方给出的WP8应用程序执行顺序: 在App.XAML.CS中,有程序主要步骤的函数 // 应用程序启动(例如,从“开始”菜单启动)时执行的代码 // 此代码在重新激活应用程序时不执行 pr ...
- EditPlus,UltraEdit等编辑器列选择的方法
在使用富文本编辑器的时候,通常模式是行选择状态,由于今天想使用EditPlus列选择状态, 于是通过在网上收集的资料,总结出相关富文本编辑器的列选择的方法. EditPlus 1)菜单:编辑 -&g ...
- hdoj 1159 Common Subsequence【LCS】【DP】
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...