CSS技术分享

1，border(外边框）

边框宽度：border——width          边框颜色：border——color       

边框样式：border——style：solid（实线）/dashed(虚线）/dotted(点划线）/double(双线）

边框数值，实线，颜色  （语法）:border:30px  solid  blue；

单边框设置：上边框：border——top:30px  blue  solid;

                       下边框：border——bottom        左边框：border——left

                      右边框：border——right         border——color边框颜色

                   边框圆角：border——radius:10px;

隐藏元素的作用：display：none                 去除列表符号：list——style：none；

2，权重：

<1>当选择器的权重一致时，它会按照顺序执行，后面的样式会覆盖前面的样式（操作同一个元素时）

<2>各个选择器之间的权重：标签0001      class0010    id    0100     ！important最高的

<3>     ! important可以提高权重，优先级

<4>样式覆盖：相同属性设置操作了相同的元素

3，可以实现换行的元素：标题标签，段落标签，div,     ul  li,    ol  li,    dl  li,    dd独自占据一行，可以设置宽度和高度<h2>我是h2标签</h2>

                                <p>我是p标签</p>

                                <div>我是div标签</div>

                                <ul>

                                        <li>我是li1号<li>

                                </ul>

                                <dl>

                                        <dt>我是</dt>

                                  </dl>

不能实现换行：

         a,   span,文本格式化表签（加粗b， strong，  倾斜i，  em）  语法：display:inline

特点：不能独自占据一行，不能设置宽度和高度，可以设置背景颜色   是靠自身内容填充起来的

           display：inline

元素不能实现换行：       语法：<a  href="">    例如：<a  href="#">张张</a>

元素能实现换行：      语法：a{display:block;}

4,元素之间的相互转换：

<1>什么是元素之间的相互转化：元素类型之间的相互变化。

<2>为什么：优化用户体验（a标签转化为可以设置宽度高度的元素； b解决浮动的能解决浮动的部分问题）

<3>怎么进行元素之间的相互转化：

display:inline(行内元素）      block（块级元素）    inline——block（行内块级元素）

元素的分类：块级元素：div     p    ul  li      ol  li     dl  dt     dd      h1——h6标题

特点：<1>独自占据一行           <2>可以设置宽度和高度                <3>可以设置text——align（文本在水平方向的对齐       display：block;

行内元素：a     b    em    i     span      strong

   特点：<1>不能独自占据一行     <2>除了img之外都不能设置宽度和高度

             <3>不能用text——align（有争议）（靠自身内容填充起背景）

语法：display：line;

行内块级元素：input

                特点：<1>不能独自占据一行，不能实现换行      <2>可以设置宽度和高度

                             <3>可以用text——align（文本在水平方向的对齐方式）