border | 易学教程

CSS——05-核心：盒子模型1

阅读更多关于 CSS——05-核心：盒子模型1

人生苦短，要学就只学有用的【前端教学-CSS-5】 CSS核心-盒子模型盒子模型（CSS重点） css学习三大重点： css 盒子模型、浮动、定位目标：理解：能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能说出外边距合并的解决方法应用：能利用边框复合写法给元素添加边框能计算盒子的实际大小能利用盒子模型布局模块案例 1.看透网页布局的本质网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？看透网页布局的本质：首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。以上两步就是网页布局的本质我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白这个盒子有什么特点。 2. 盒子模型（Box Model）所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。总结：盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是内容区域盒子的厚度我们成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)

4. int()和float()从字符串中取值误区

阅读更多关于 4. int()和float()从字符串中取值误区

<!DOCTYPE html> Untitled3 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

3. 成员运算符in 误区

阅读更多关于 3. 成员运算符in 误区

<!DOCTYPE html> Untitled1 */ /*--> */ */ /*--> */ */ /*--> */ <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-AMS_HTML"></script>  <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true, processEnvironments: true }, // Center justify equations in code and markdown cells. Elsewhere // we use CSS to left justify single line equations in code cells. displayAlign: 'center', "HTML-CSS": { styles: {'.MathJax

CSS盒子模型1.0

阅读更多关于 CSS盒子模型1.0

CSS盒子模型什么是盒子模型网页是由多种不同的盒子构成的，所有说盒子是网页布局的关键点盒子分为哪三个部分边框（border）内边距（padding）外边距（margin）边框border -盒子的厚度宽度border-width 样式border-style 分为4种 – 没有边框border-style：none； — 边框为单实线：border-style：solid； –边框为虚线：dashed； – 边框为点线：dotted；颜色border-color 以上内容可简写为 border：7px solid red；边框还可以分为为以下四种边框 -----border-top 上边框 ----border-bottom 下边框 -----border-left 左边框 –border-right 右边框其他用到边框的地方 —表格的细线边框 border-collapse：collapse 内边距padding — 盒子内部的距离 padding: 10px;-------上下左右都为10 padding: 10px 20px-----上下10 左右为20 padding: 10px 20px 30px----上为10 左右为20 下为30 padding: 10px 20px 30px 40 px ----上为10 右为20 下为30 左为40 注意

2.5、CSS盒子模型

阅读更多关于 2.5、CSS盒子模型

盒子模型解释元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置边框设置一边的边框，比如顶部边框，可以按如下设置： border-top-color:red; /* 设置顶部边框颜色为红色 */ border-top-width:10px; /* 设置顶部边框粗细为10px */ border-top-style:solid; /* 设置顶部边框的线性为实线，常用的有：solid(实线) dashed(虚线) dotted(点线); */ 上面三句可以简写成一句： border-top:10px solid red; 设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。四个边如果设置一样，可以将四个边的设置合并成一句： border:10px solid red; 设置内间距padding 设置盒子四边的内间距，可设置如下： padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /*

盒子模型

阅读更多关于盒子模型

1 盒子 css在处理网页的时候，它认为每个元素都包含在一个不可见的盒子里。为什么要想象成盒子呢？因为如果把所有的元素都想象成盒子，那么我们对网页的布局就相当于摆放盒子。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页的布局。 2 盒子模型一个盒子可以分为以下几个部分：内容区（content）内边距（padding）边框（border）外边距（margin） 2.1 内容区内容区指的是盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小。 width和height属性只适用于块级元素。 2.2 内边距顾名思义，内边距指的是元素内容区和边框以内的空间。默认情况下width和height不包含padding的大小。使用padding属性来设置元素的内边距。例如： padding:10px 20px 30 px 40px;这样会设置元素的上右下左四个方向的内边距。　 padding:10px 20px 30px;分别指定上、左右、下四个方向的内边距。 padding:10px 20px;分别指定上下、左右四个方向的内边距。 padding:10px;同时指定上右下左四个方向的内边距。　

CSS画出的各种形状图

阅读更多关于 CSS画出的各种形状图

利用CSS可以画出各种需要的图形目录 [1]矩形 [2]圆形 [3]椭圆 [4]直角三角形 [5]正三角形 [6]平行四边形 [7]梯形 [8]六角星 [9]六边形 [10]五角星简单图形矩形 div{ width: 100px; height: 100px; background-color: red; } 圆形 div{ width: 100px; height: 100px; background-color: red; border-radius: 50%; } 椭圆 div{ width: 100px; height: 50px; background-color: red; border-radius: 50%; } 直角三角形 div{ width: 0; height: 0; border: 50px solid transparent; border-bottom-color: red; } 正三角形 div{ width: 0; height: 0; border: 50px solid transparent; border-width: 50px 43.3px; border-bottom-color: red; } 平行四边形 div{ margin-left: 50px; width: 100px; height: 100px;

前端入门

阅读更多关于前端入门

一、组合选择器　　1.群组选择器　　2.子代选择器　　3.后代选择器　　4.相邻选择器　　5.兄弟选择器　　6.交集选择器　　7.组合选择器的优先级二、属性选择器三、盒模型　　1.盒模型概念　　2.盒模型成员介绍四、边界圆角　　1.单角设置　　2.整体赋值五、常用标签　　1.超链接标签a 　　2.图片标签img 　　3.列表标签list 六、伪类选择器　　1.a标签的四大伪类　　2.内容伪类　　3.索引伪类　　4.取反伪类七、盒模型布局　　1.做页面必备reset操作　　2.盒模型布局基本介绍　　3.display：显示方式　　4.兄弟坑　　5.父子坑　　6.解决方案一、组合选择器 1.群组选择器　　可以将任意多个选择器分组到一起，用逗号分隔。 div,.s,section{ color:red; } 2.子代选择器　　如果只希望影响到某个标签下的第一级标签，可以用子代选择器。　　x > y。只会影响到x标签下的y标签，不会影响到x标签下的z标签里的y标签。 div>strong{ color:red; } 3.后代选择器　　又称包含选择器。只要是在这个标签里的某种标签都会被影响　　x 空格 y。x标签下所有的y标签 div a { text-decoration: none; } 4.相邻选择器　

XPath函数——字符串函数

阅读更多关于 XPath函数——字符串函数

字符串函数主要用来处理字符串。字符串函数主要包括以下：concat(),contains(),normalize-space(),substing(),substring-before(),subsring-after(),translate(). 1、concat() concat()函数用于串连多个字符串。简单示例： xml： <?xml version="1.0" encoding="UTF-8"?> <root> <e id="1">st</e> <e id="2">nd</e> <e id="3">rd</e> </root> */ /*--> */ xslt： <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="text" version="1.0" encoding="gb2312" indent="yes"/> <xsl:template match="/root"> <xsl:for-each select="e"> <xsl:value-of select="concat(@id,.,' ')"/> </xsl:for-each> <

CSS之盒模型边框，内边距，外边距，阴影，圆角

阅读更多关于 CSS之盒模型边框，内边距，外边距，阴影，圆角

盒子模型盒子模型盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）组成；盒子里面的文字和图片等元素是内容区域；盒子的厚度我们称为盒子的边框；盒子内容与盒子之间的距离是内边距；盒子与盒子之间的距离是外边距；标准盒子模型盒子边框（border） border: border-width || border-style || border-color 属性作用 border-width 定义边框粗细，单位是 px border-style 边框的样式 border-color 边框颜色 border-style ： none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线； dashed：边框为虚线； dotted：边框为点线；表格细线边框通过表格的 cellspacing="0" ，将单元格与单元格之间的距离设为 0 但是两个单元格之间的边框会出现边框，从而使边框变粗；通过设置 css 属性 table {border-collapse: collapse;} 表示相邻边框合并在一起； <style> table, th, td { border: 1px dashed #ccc; border-collapse: collspase; } </style> 内边距（padding）属性作用

订阅 border