CSS学习总结

2019-05-15  本文已影响0人  冰风v落叶

一、Flex-弹性盒布局

弹性盒定义了子元素如何在弹性盒中布局。
弹性盒常用属性
1. flex-direction ，设置主轴，定义了子元素在弹性盒中的位置
2. justify-content，子元素在主轴上的对齐方式。
3. align-items，子元素在交叉轴上的对齐方式。
4. flex-wrap，子元素的换行方式。
5. align-content，设置各行的对齐方式。
6. align-self，用于设置子元素自身的，在交叉轴上的对齐方式，会覆盖容器的align-items属性。
7. flex，设置子元素如何分配空间
需要注意的是，flex可以进行简写：
.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}

二、CSS选择器

1. 点代表类选择器
为class="hometown"的所有p标签设定样式
p.hometown{ 
    background-color:yellow;
}
2. 空格代表后代选择器
空格代表后代选择器

h1 em {color:red;}

作为h1元素后代的任何em元素的颜色为红色色。
3. #代表ID选择器
ID选择器名称必须是唯一的

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>
4. []代表属性选择器
给带有href和title属性的a标签设置颜色为红色
a[href][title] {color:red;}

给class为important warning的p标签设置颜色为红色
p[class="important warning"] {color: red;}

给class属性中包含important的p标签设置颜色为红色
p[class~="important"] {color: red;}

把class="sidebar"的div中的
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
5. ：>代表子元素选择器
h1 > strong {color:red;}

h1标签之后紧跟strong标签的会变红
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

h1标签嵌套子标签再嵌套strong标签的不会变红
<h1>This is <em>really <strong>very</strong></em> important.</h1>
6. ：+代表兄弟元素选择器
用一个+结合符只能选择两个相邻兄弟中的第二个元素

li + li {font-weight:bold;}

<div>
  <ul>
    <li>List item 1 此行 不会 加粗</li>
    <li>List item 2 此行会加粗</li>
    <li>List item 3 此行会加粗</li>
  </ul>
  <ol>
    <li>List item 1 此行 不会 加粗</li>
    <li>List item 2 此行会加粗</li>
    <li>List item 3 此行会加粗</li>
  </ol>
</div>
7. 冒号 : 代表伪类和伪元素
例子1：

将第一次出现的p标签的字体设置为红色
p:first-child {
  color: red;
} 
<p>some text 此处字体会变红</p>
<p>some text 此处字体不会变红！！！</p>

例子2：

将p标签的第一个子标签i的字体加粗
p > i:first-child {
  font-weight:bold;
} 
<p>some <i>text 此处会被加粗</i>. some <i>text 此处不会被加粗</i>.</p>
<p>some <i>text 此处会被加粗</i>. some <i>text 此处不会被加粗</i>.</p>

例子3:

将 第一个p标签的后代i标签 的颜色变成蓝色
p:first-child i {
  color:blue;
} 

<p>some <i>text 此处会变蓝</i>. some <i>text 此处会变蓝</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>

只有上述两处会变蓝色，其他地方不会变，

在h1标签之前插入图片
h1:before{
  content:url(logo.gif);
}
会在这里插入一张图片
<h1>This is a heading</h1>

三、常用的CSS

1. position

注意：absolute是相对于 static 定位以外的第一个父元素进行定位，可以理解为相对于第一个relative定位的元素进行定位。

h2.pos_abs{
    position:absolute;
    left:100px;
    top:150px
}

<head>
    <style type="text/css">
      h2.pos_left{
          position:relative;
          left:-20px
    }
    h2.pos_right{
        position:relative;
        left:20px
    }
   </style>
</head>
<body>
    <h2>这是位于正常位置的标题</h2>
    <h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
    <h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
    <p>相对定位会按照元素的原始位置对该元素进行移动。</p>
</body>
2. display

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。

2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。

3. block元素可以设置margin和padding属性。

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。

2. inline元素设置width,height属性无效。

3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

3. margin，外边距，可以有1到4个值
4. box-sizing，指内边距和边框与宽度、高度的关系
5. word-wrap，有时候会遇到英文或者url链接不换行的情况，需要使用此属性使之换行
6. overflow，规定了内容溢出时，如何处理
7. box-shadow，为边框增加阴影

四、易混淆的知识

1. 标准文档流，就是默认的排列规则
块级元素，小程序中很多组件默认就是块级元素（display:block）
行内元素，小程序中很多组件默认就是行内元素（display:inline）

总结：

（1）块级元素的宽度默认是父元素宽度，而行内元素的宽度一定是子内容的宽度。
（2）块级元素的高度默认是子元素高度，而行内元素的高度一定是子元素的高度。
（3）块级元素的内外边距均可以设置，而行内元素只有左右的外边距内边距可以设置。
（4）块级元素总是从新行开始，而行内元素总是和非块级元素在一行上。
（5）块级元素内部可以包含块级和行内元素，而行内元素内部只能包含行内元素。
2. 盒子模型
上一篇 下一篇

猜你喜欢

热点阅读