css样式

一、 如何理解盒子模型 盒子模型 （ 框模型 ）是css部分非常重要的一部分知识，CSS在处理网页的时候，认为每个元素都处在一个不可见的盒子中。盒子模型的构想，把所有的元素都想象成盒子，那么对网页进行布局的时候就可以理解为对盒子进行排列。至于要将相应的盒子摆放到网页相应的位置中即可完成页面布局。 CSS 盒子模型 ( Box Model ) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式 盒子模型包括 width宽度，height高度，border边框，padding内边距，margin外边距，content内容 这几个部分 。 二、 CSS 盒子模型概述 位置关系 盒子模型最里面的部分是内容区域（content）； 直接包裹着内容的是内边距（padding）； 内边距的边缘是边框（border）； 边框之外是外边框（margin），外边框默认值默认值是透明的，因此不会遮挡其后内容。 三、 盒子模型的组成 一个盒子的实际高度、宽度：content + padding + border + margin 盒子模型中可以设置的属性有： 1、width / height : 设置的是内容区的高度和宽度（只是内容区的大小，而不是整个盒子的大小。） 2、 border边框: 详细内容点击链接转到有关border属性的博客 3、 padding内边距：

一，对于block元素 padding是会影响元素的尺寸的。 DOM文档： <div class="box"></div> css清单： .box{ width:200px; height:200px; background-color: #ffed53; padding:20px; } 实际效果： 元素大小240*240 ，因为有padding:20px. 结论：padding会对block元素的尺寸产生影响。 二，对于block水平元素，但是width:auto或box-sizing为border-box的时候 DOM文档： <div class="box">文字的位置在哪里呢？</div> css清单： .box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 10px; } 实际效果：box大小还是200*200,但是文字内容还是有了左padding----10px 当padding大小超过宽高时， css样式： .box{ width:200px; height:200px; background-color: #ffed53; box-sizing:border-box; padding:0 200px; } 实际效果：400px*200px

1、什么是CSS盒模型？CSS盒子模型包括元素、内边距、边框、外边距，如下图： 　　　　 2、元素分类：元素可以分为块状元素、内联元素、内联块状元素。 　　　　常用块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 　　　　常用内联元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 　　　　常用内联块状元素：<img>、<input> 　　　　（1）块状元素（也叫块级元素）特点 每个块级元素都从新的一行开始，并且其后的元素也另起一行。 元素的高度、宽度、行高以及顶和底边距都可设置。 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 　　　　 注：可以使用 display: block ，将元素转为块状元素，使之具备块状元素的特点。 　　　　 　　　　（2）内联元素（也叫行内元素）特点 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变。 　　　　 注：可以使用 display: inline ，将元素转为内联元素，使之具备内联元素的特点。 　　　 　（3）内联块状元素特点

目录 元素分类 元素分类--块级元素 元素分类--内联元素 元素分类--内联块状元素 盒模型--边框（一） 盒模型--边框（二） 盒模型--宽度和高度 盒模型--填充 盒模型--边界 元素分类 在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素 。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的 内联块状元素 有： <img>、<input> 元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素 ，从而使a元素具有 块状元素 特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度

元素分类 在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素 。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的 内联块状元素 有： <img>、<input> 元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置 display:block 就是将元素显示为块级元素。如下代码就是将 内联元素a 转换为 块状元素 ，从而使a元素具有 块状元素 特点。 a{display:block;} 块级元素特点： 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 元素分类--内联元素 在html中，<span>、<a>、<label>、<input>、 <strong> 和

1.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有： <img>、<input> 2.元素分类--块级元素 什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。 如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。 a{display:block;} 块级元素特点： a、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道， 一个块级元素独占一行 ） b、 元素的高度、宽度、行高以及顶和底边距都可设置。 c、 元素宽度在不设置的情况下，是它本身父容器的100% （和父元素的宽度一致），除非设定一个宽度。 3.元素分类--内联元素 在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）

CSS盒模型和文本溢出 学习目标 认识盒子模型 盒子模型的组成部分 学习盒子模型的相关元素margin padding 文本溢出相关的属性 一、认识盒子模型 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。Css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。 二、盒子模型的相关元素 1、padding的使用方法 说明： 填充：padding，在设定页面中一个元素内容到元素的边缘（边框）之间的距离。也称补白。 用法： 1）用来调整内容在容器中的位置关系 2）用来调整子元素在父元素中的位置关系 注：padding属性需要添加在父元素上。 3）padding值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值 属性值的4种方式： 四个值：上 右 下 左 {padding：0px 0px 0px 40px；} 三个字：上 左右 下 {padding：10px 20px 30px；} 二个值：上下 左右 {padding：10px 20px；} 一个值：四个方向 padding：2px；/*定义元素四周填充为2px*/ 说明：可单独设置一方向填充，如：上方向padding-top：10px；右方向padding-right：10px；下方向padding-bottom

快级元素： 在html中<div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。 设置display:block就是将元素显示为块级元素。 将行内元素a转换为块级元素，从而使a元素具有块级元素特点 a{display:block;} 行内元素： 在html中，<span>,<a>,<label>,<input>,<img>,<strong>,<em>就是典型的行内元素 display:inline 内联块状元素 ： 同时具备内联元素，块状元素的特点，代码：display:inline-block <img>,<input>标签就是这种内联块状标签 盒模型： 边框 ：就是围绕着内容及补白的线，这条线可以设置它的粗细，样式和颜色（边框三个属性） div{ border:2px solid red; } 注意： border-style(边框样式)常见形式： dashed(虚线) dotted(点线) solid(实线) border-color(边框颜色)颜色可以设置为十六进制颜色 若想为p标签单独设置下边框,而其他三边都不设置边框样式： div{border-bottom:1px solid red;} 宽度和高度：css定义的宽和搞指的是填充以里的内容范围。 一个元素实际宽度=左边界+右边界+左填充+内容宽度+右填充+右边框+右边界 元素的实际长度为：10px

border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/ 以上是建议书写方式,但也可以使用常规的方式 如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/ 其他框线样式 solid /*实线框*/ dotted /*虚线框*/ double /*双线框*/ groove /*立体内凸框*/ ridge /*立体浮雕框*/ inset /*凹框*/ outset /*凸框*/ 来源： https://www.cnblogs.com/yazixun/archive/2011/11/30/2268659.html

这篇写的是今天的学习到的属性，一共20个。 属性再多，但也要会使用，会在使用时可以记起它，才能起到它为我们所需要的作用。 样式属性 1、border CSS边框属性允许你指定一个元素边框的样式和颜色。 边框样式border-style 属性用来定义边框的样式 none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值 例子： border-style: solid; 边框宽度 border-width border-width:5px; 边框颜色border-color 可以设置的颜色： name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。 注意： border-color单独使用是不起作用的，必须得先使用border