<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[coderlhj666的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/coderlhj666</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; coderlhj666]]></copyright><item><title><![CDATA[css代码规范]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125991823</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125991823</guid><author>coderlhj666</author><pubDate>Tue, 26 Jul 2022 11:51:51 +0800</pubDate><description><![CDATA[参考凹凸实验室代码规范。]]></description><category></category></item><item><title><![CDATA[flex布局]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125917627</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125917627</guid><author>coderlhj666</author><pubDate>Thu, 21 Jul 2022 18:03:49 +0800</pubDate><description><![CDATA[认识flexbox]]></description><category></category></item><item><title><![CDATA[认识浮动布局]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125522658</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125522658</guid><author>coderlhj666</author><pubDate>Wed, 29 Jun 2022 15:27:35 +0800</pubDate><description><![CDATA[float 属性最初只用于在一段文本内浮动图像, 实现文字环绕的效果]]></description><category></category></item><item><title><![CDATA[你不知道的布局-定位（position）]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125316487</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125316487</guid><author>coderlhj666</author><pubDate>Thu, 16 Jun 2022 15:17:11 +0800</pubDate><description><![CDATA[你不知道的布局-定位（position）]]></description><category></category></item><item><title><![CDATA[认识精灵图 CSS Sprite]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125260569</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125260569</guid><author>coderlhj666</author><pubDate>Mon, 13 Jun 2022 15:13:26 +0800</pubDate><description><![CDATA[认识精灵图 CSS Sprite]]></description><category></category></item><item><title><![CDATA[border实现图形（边框的形状）和旋转]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125233111</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125233111</guid><author>coderlhj666</author><pubDate>Sat, 11 Jun 2022 11:49:32 +0800</pubDate><description><![CDATA[border实现图形（边框的形状）和旋转]]></description><category></category></item><item><title><![CDATA[盒子属性在行内非替换元素的特殊性]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/125144014</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/125144014</guid><author>coderlhj666</author><pubDate>Mon, 06 Jun 2022 11:54:06 +0800</pubDate><description><![CDATA[为什么有些css属性对行内非替换元素不起效果]]></description><category></category></item><item><title><![CDATA[margin的传递和折叠]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124987826</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124987826</guid><author>coderlhj666</author><pubDate>Thu, 26 May 2022 16:53:06 +0800</pubDate><description><![CDATA[margin的传递和折叠
一、margin的上下传递(一般发生在父子元素之间)


margin-top传递


如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素


为什么会产生传递呢？


原因很简单：w3c的人设计的时候可能考虑到既然父子是近挨着的，子元素没必要设置外边距，给父元素设置更适合





解决方案：

1、给父元素设置overflow：auto，触发BFC
2、给父元素设置padding-top、padding-bottom
3、给父元素设]]></description><category></category></item><item><title><![CDATA[盒子模型-padding和margin的对比]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124985354</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124985354</guid><author>coderlhj666</author><pubDate>Thu, 26 May 2022 15:21:49 +0800</pubDate><description><![CDATA[盒子模型-padding和margin的对比
一、如果要设置一个子元素在父元素的左上距离，如何设置


第一种方式，给父元素添加padding


设置前





设置后





通过上面可以发现给父元素设置padding，会使父元素变大，宽度就是padding+内容宽度


解决方式设置box-sizing，后就盒子宽度就等于padding+内容宽度+border宽度


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;]]></description><category></category></item><item><title><![CDATA[CSS盒子模型]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124980605</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124980605</guid><author>coderlhj666</author><pubDate>Thu, 26 May 2022 11:08:10 +0800</pubDate><description><![CDATA[盒子模型
一、认识盒子

其实盒子在我们生活中随处可见





由上面这个图可以看出一个盒子由内容的宽(width)高(height)、内边距(padding)、边框(border)、外边距(margin)组成

二、HTML的每一个元素都是一个盒子

其实，我们可以把html的每一个元素都可以看成是一个盒子


三、盒子模型(Box Model)

HTML的每一个元素都可以看作是一个盒子，可以具备以下4个属性
内容（content）

元素内容的width/height


内边距（padding）
]]></description><category></category></item><item><title><![CDATA[HTML元素的隐藏四种方法]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124838292</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124838292</guid><author>coderlhj666</author><pubDate>Wed, 18 May 2022 11:07:00 +0800</pubDate><description><![CDATA[HTML元素的隐藏四种方法
一、方法一：display设置为none


元素不显示，也不占据任何位置，不占据任何空间（和不存在一样）


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content]]></description><category></category></item><item><title><![CDATA[HTML元素的特性有哪些呢]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124826540</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124826540</guid><author>coderlhj666</author><pubDate>Tue, 17 May 2022 17:47:51 +0800</pubDate><description><![CDATA[HTML元素的特性有哪些呢
一、HTML的类型


我们知道div是块级元素会独占一行，span元素是行内级元素会在同一行显示。


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="w]]></description><category></category></item><item><title><![CDATA[css的特性-层叠性]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124820558</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124820558</guid><author>coderlhj666</author><pubDate>Tue, 17 May 2022 14:22:23 +0800</pubDate><description><![CDATA[css的特性-层叠性
一、css的翻译是层叠样式表，那什么是层叠呢？


对于一个元素来说，相同属性我们通过不同的选择器进行多次设置


那么这些属性就会一层层的覆盖上去


最终只有一个会生效
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;]]></description><category></category></item><item><title><![CDATA[css的特性-继承性]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124799510</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124799510</guid><author>coderlhj666</author><pubDate>Mon, 16 May 2022 14:46:12 +0800</pubDate><description><![CDATA[css的特性-继承性
一、css的某些属性具有继承性(Inherited)：


如果一个属性具有继承性，那在该元素设置之后，它的后代元素都可以继承这个属性。


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewp]]></description><category></category></item><item><title><![CDATA[常见伪元素的使用before-after]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124795866</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124795866</guid><author>coderlhj666</author><pubDate>Mon, 16 May 2022 11:15:58 +0800</pubDate><description><![CDATA[常见伪元素的使用before-after
一、为什么有些场景使用伪元素会更好呢？


为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line


::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)


常通过 content 属性来为一个元素添加修饰性的内容。


假如我需要在一段文本之前添加一些文字，首先我们可能会想到的是在前面或者后面使用span元素添加





&lt;!DOCTYPE html&gt;
&lt;html lang="e]]></description><category></category></item><item><title><![CDATA[line-height属性的本质]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124770882</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124770882</guid><author>coderlhj666</author><pubDate>Sat, 14 May 2022 17:13:01 +0800</pubDate><description><![CDATA[line-height属性的本质
一、line-height的简单理解


line-height用于设置文本的行高


MDN解释：



行高可以简单理解为一行文字所占据的高度







二、为什么文本需要行高？



第一幅图是有行高的，第二幅图是行高比较小的，这样一对比就分享图一比图二更容易阅读，阅读感更好。

三、深入理解行高（line-height）


行高的严格定义：两行文字基线（baseline）之间的距离


基线（baselin）：与小写字母x最底部的线





例子：

如设置]]></description><category></category></item><item><title><![CDATA[谈谈text-align的历史、本质、特性]]></title><link>https://blog.youkuaiyun.com/coderlhj666/article/details/124765793</link><guid>https://blog.youkuaiyun.com/coderlhj666/article/details/124765793</guid><author>coderlhj666</author><pubDate>Sat, 14 May 2022 11:31:58 +0800</pubDate><description><![CDATA[text-align本质探究


text-align：直接翻译过来就是设置文本的对齐方式


MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐,不控制块元素自己的对齐，只控制它的行内内容的对齐。




常用的值

​    	 left：左对齐
​		 right：右对齐
​		 center：正中间显示
​		 justify：两端对齐

W3C解释：




W3C: 大概意思是这个属性只是对行内级元素起作用，对块级元素不起作用。


代码演示：


left值：
&lt;!DOC]]></description><category></category></item></channel></rss>