css列表缩进是什么意思outside和inside区别,在实际例子中看不出区别啊

html-css09

css列表缩进是什么意思outside和inside区别,在实际例子中看不出区别啊,第1张

list-style-position inside 占用li的宽度的,而outside则是在li的外面,他不占用li的宽度。就好像padding和margin差不多,inside 就相当于给li设置了padding,而outside就相当于margin,其实并非你看不出区别,只是你没仔细或者精确的计算而已,就是li前面那个点的位置不同,不信你同时写2个列表分别设置两个样式对比一下效果;

不过呢,我个人比较少用到这2个样式,还是用padding比较多,这样控制数值比较方便或者习惯了

使用CSS的text-indent属性可以定义文本段落中的首行字体缩进的效果。使用该属性只对元素中的段落产生影响。对于使用<br>标签产生的换行效果,并不起作用。

1、在CSS样式表中设置文本首行缩进的样式规则。代码如下:

div{

 text-indent:2em

 font-size:24px

 width:400px

}

div标签选择器使用text-indent属性将段落首行缩进2em,这是两个汉字字符的宽度。使用font-size属性将字体大小设置为24px,使用width属性将div元素的宽度设置为400px,都是为了使效果能够更好地显示。

2. 在HTML网页中添加要使用标签选择器的div元素内容。代码如下:

<body>

<div>

<p>这段内容是一个文本首行字体缩进的实例,注意文本中段落首行部分的显示效果。</p>

<p>这段内容是一个文本首行字体缩进的实例,注意文本中段落首行部分的显示效果。</p>

</div>

div标签选择器直接应用到了相关的HTML div元素中,不再需要另外进行设置了。

3. 在浏览器中浏览文本首行缩进的显示效果。如下图所示:

从上图中可以看出,只要在父元素中定义了文本的缩进属性,在各个子元素中将继续继承这个缩进属性值。

一般用tab键进行缩进,占位4个字符,不要用空格。这个主要看个人习惯,统一即可。

各个编辑器的缩进方式

sublime里面用tab缩进,是默认的4个字符。

phpstorm中写代码可以设定4个字符的缩进,或者2个字符缩进。