HTML、CSS
关注
分享
扫一扫
文章平均质量分 62
椰椰要努力
一颗炙热的心保持对互联网、技术的热爱，加油~
展开
-
关于CSS中的居中方法
文字居中【水平居中】代码：text-align: center;【垂直居中】使行高的高度等于整个块级元素的高度（有局限性：文字只有一行时适用）代码：height: 20px; line-height: 20px;块级元素 方法一： 使用margin属性的auto来自动水平居中。（有局限性：只有子元素的宽度 比父元素的宽度小才生效）代码： margin: 0 auto; /*前提：该块原创 2017-02-08 22:45:52 · 187 阅读 · 0 评论 -
文本内容单行溢出隐藏显示省略号和两行溢出隐藏省略号方法
有这么一个p标签：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本内容超出后溢出隐藏</title> <style> p { width: 300px; height: 30px; line-h原创 2017-08-21 18:29:52 · 414 阅读 · 0 评论 -
三栏布局
圣杯和双飞翼布局在另一篇有讲到，这里就不再赘述了，链接：圣杯布局和双飞翼布局一：float + box-sizing + background-clip 重点：main的border、background-clip、box-sizing，left和right的margin-left。<!DOCTYPE html> <html lang="en"> <head> <meta charset=原创 2017-08-13 14:05:37 · 326 阅读 · 0 评论 -
圣杯布局和双飞翼布局
一：圣杯布局重点：content的padding，left的margin-left和left值，right的margin-left和right值：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圣杯布局</title> <style> * { t原创 2017-08-11 18:29:59 · 249 阅读 · 0 评论 -
CSS浮动常遇问题及解决方法
在给元素设置为浮动后并没有出现预期的效果：这个问题是编程过程中常见问题，特别是对于初学者来说。我就自己平时出现的问题说一下可解办法：可能问题一：两个同级元素需要并排显示，却以为只给第二个元素设置浮动就会达到效果，结果出现下图所示效果： （即和原效果没什么不同） 其实这还是对浮动理解不深的缘故。如果第一个元素不是浮动，第二个浮动，两个元素是不会显示在一行的，只有第一个元素浮动，第二个浮动也浮原创 2017-02-10 00:22:07 · 1052 阅读 · 0 评论 -
谈对BFC布局的理解
BFC（Block formatting context）：块级格式上下文，是一个独立的渲染区域，与区域外部毫不相干。 BFC布局规则： - 内部的Box会在垂直方向，一个接一个地放置； - Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠； - 每个元素的margin box的左边，与包含块border box的左边相接原创 2017-08-10 13:41:00 · 557 阅读 · 0 评论 -
overflow:hidden可以清除浮动原因
W3C上定义overflow属性是： 规定当内容溢出元素框时发生的事情。 hidden值：内容会被修剪，并且其余内容是不可见的。 那为什么overflow:hidden可以清楚浮动呢？ overflow除了(visible)会建立新的块级格式（BFC）给他的子元素（在没有给父元素高度的情况下，给父元素设置overflow: hidden时，就要计算父级块的全部高度才能确定在什么位置hid原创 2017-08-10 14:50:20 · 707 阅读 · 0 评论 -
CSS常用选择器及优先级、一些易混淆选择器的区别
几个常用不易混淆的选择器就简单介绍一下，就不再赘述了： 通配选择器：*（获取所有标签）； 类型选择器：如div、p; class选择器：class，可以允许多个元素使用同一个class名； id选择器：id，每个id名只能允许一个元素使用； 群组选择器：如div,p（中间用逗号隔开，表示选择所有div元素和所有p元素）; 包含选择器：如div p（中间用空格隔开，表示选择div元素内部的所有p元素）原创 2017-08-17 01:24:58 · 357 阅读 · 0 评论 -
块状元素和内联元素的区别
内联元素、块状元素、内联块的转换： 内联元素->块状元素：display:block; 块状元素->内联元素：display:inline; 元素->内联块状元素：display:inline-block; 块状元素（div、ul、ol、dl、li、p、h1~h6、table、form等）： 独占一行； 支持所有样式； 不设置宽度时宽度为父元素宽度； 换行符不解析。 内联元素（span、a、stro原创 2017-08-16 23:13:50 · 495 阅读 · 0 评论 -
inline-block布局产生间隙的原因及解决办法（水平、垂直）
布局的一种方法是使用display:inline-block;它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以可以置身于inline水平的元素中。但是在使用display:inline-block列表布局经常会遇到“换行符/空格间隙问题”。如下：<!DOCTYPE htm原创 2017-08-16 22:18:43 · 19510 阅读 · 4 评论 -
href和src的区、link和@import的区别
href和src的区别： href(Hypertext Reference)：超文本引用，常用的标签有link、a等，用来链接引用的外部资源。在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，如： <link href="style.css" rel="stylesheet" /> src(source)：引入资源，引入的src的内容是页面必不可少的一部分。引入的内容原创 2017-08-16 11:39:58 · 939 阅读 · 0 评论 -
关于CSS浮动
关于浮动理解 浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。 假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。 div的顺序是HTML代码中div的顺原创 2017-02-08 23:51:58 · 202 阅读 · 0 评论 -
H5新特性（常见）
H5新特性 语义化标签section：可以认为div是section元素,一个普通的分块元素，可用来定义网站中的特定的可区别的区域；header：包括标题，logo，导航和其他页眉的内容，可以在网站上加多个header，就像给内容加多个标题； hgroup：即将标题进行分组的元素；footer：版权声明和作者信息,包涵一些链接；nav：主要用于主导航菜单；article：独立成文且以其他格式原创 2017-11-01 11:54:00 · 1016 阅读 · 0 评论