AlexZ33
AlexZ33

CSS教程： CSS (中)

CSS (中)

回顾

HTML5新增的那些

HTML5标准更加的讲究语义化了，借用一张网上的图来说明这些新标签

  • header元素：header 元素代表“网页”或“section”的页眉。
  • footer元素：footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
  • hgroup元素：
    标签用于对网页或区段（section）的标题进行组合。
  • nav元素：nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
  • aside元素：aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。（特殊的section）

  • section元素：section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。

    • 当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div元素而非section

  
图灵

  
一个可爱>技术俱乐部
    • 注意标题部分位于它的内部，而不是前面（通常不推荐为那些没有标题的内容使用section）
    • article元素：article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。（特殊的section）除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。

    推荐看原博主的博客：传送门

    常见问题

    为什么出现二级标题比一级的大？

    http://www.it1352.com/867990.html

    背景与边框

    灵活背景定位

    • background-position
    • 原理：background-positioon:right 10px bottom 20px;指背景位置距离右边10px，距离底部20px.
    /**
 * Flexible background positioning
 * via extended background-position
 */

div {
    background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
    background-position: right 20px bottom 10px;
    
    /* Styling */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
}

    https://codepen.io/AlexZ33/pen/JjoRvRP

    /**
 * Flexible background positioning
 * via calc()
 */

div {
    background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
    background-position: calc(100% - 20px) calc(100% - 10px);
    
    /* Styling */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
}

    http://dabblet.com/gist/b5fcb42d055427ab6c1a
    https://codepen.io/AlexZ33/pen/QWwKrKm

    • background-origin
    • 作用：用于设置背景的原始位置依据，值为content-box,padding-box,border-box;
    /**
 * Flexible background positioning
 * via extended background-position
 */

div {
    background: url(http://csssecrets.io/images/code-pirate.svg)
                no-repeat bottom right #58a;
    background-origin: content-box;
    
    /* Styling */
    max-width: 10em;
    min-height: 5em;
    padding: 10px;
    color: white;
    font: 100%/1 sans-serif;
}

    http://dabblet.com/gist/0f19ac5d28d0aa7b6c60
    https://codepen.io/AlexZ33/pen/xxbEjRK

    边框内圆角

    https://codepen.io/AlexZ33/pen/vYEXjgX

    横向条纹背景

    • 原理：利用bacground:linear-gradient(red 50%,green 50%)实现双条纹，利用background-size:100% 30px实现单个条纹高15px

    垂直条纹背景

    • 原理：设置linear-gradient角度为90deg，或to right，通过background-size:30px 100%设置条纹单个宽15px

    斜向条纹

    • 原理：45deg斜向条纹，利用 勾股定理计算出 条纹若30px时，需要background-size对应的值

    60度斜向条纹

    • 原理：通过background:repeating-linear-gradient(60deg,red,red 15px,blue 15px ,blue 30px)实现

    灵活同色系条纹

    • 应用场景：如bootstrap的进度条，由深色背景+同色系浅背景的斜条纹组成
    • 原理：同色系深色作为背景色，再通过叠加白色半透明和透明条纹，实现深浅间隔条纹

    蓝色网格背景

    • 原理：利用background-image:linear-gradient()支持分隔叠加的属性方式

    波点背景图

    • 原理：利用background:radial-gradient(green 30%,transparent 0)实现，径向渐变由内向外

    动态loading图

    • 原理：通过叠加多个animation，实现连续动画效果（旋转，变色，边框宽度增加）

    https://codepen.io/AlexZ33/pen/abzmGWo

    连续的图像边框

    • 原理：通过叠加纯白背景（渐变实现，padding-box）和图像背景（border-box）

    信封边缘背景

    • 原理：通过叠加纯白渐变背景（padding-box)和-45deg条纹渐变（borderbox)

    边框背景图实现信封边缘

    • 原理：通过border-image值为线性渐变的条纹而实现

    移动的虚线边框

    • 原理：利用背景叠加实现虚线边框，通过animation实现背景移动产生动态效果

    字体脚注效果

    • 原理：利用border-image属性加一条线性渐变产生的垂直条纹，border-width控制边框粗线，渐变长度来控制脚注长度

    尺寸

    尺寸，我们就应该从单位聊起，对于px这个单位，做网页的应该在熟悉不过了，因此不多做介绍。
    那么，我们可以来介绍一下下面几个单位：

    • 百分比：百分比的参照物是父元素，50%相当于父元素width的50%
    • rem：这个对于复杂的设计图相当有用，它是html的font-size的大小
    • em：它虽然也是一个相对的单位，相对于父元素的font-size，但是，并不常用，主要是计算太麻烦了。

    单位只是一个来定义元素大小的相应参考。另一个概念，或许可以用房子来打一个比方，在早年每幢房子都会在房子的外围建一层栅栏，使得整一块地区可以看成房子+内部地块+栅栏+外围地块的模型。而在css中，每个元素也会有盒子模型的概念。
    盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)
    css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图：
    width-auto
    但是，height的属性值也是默认的auto，为什么没有像width一样呢？
    其实，auto这个属性值表示的是浏览器自动计算。这种自动计算，需要一个基准，一般浏览器都是允许高度滚动的，所以，会导致一个问题——浏览器找不到垂直方向上的基准。
    同样地道理也会被应用在margin属性上。相信如果考察居中时，水平居中你可能闭着眼睛都能写出来，但是垂直居中却绕着脑袋想。这是因为如果是块级元素水平居中只要将水平方向上的margin设置成auto就可以了。但是，垂直方向上却没有这么简单，因为你设置成auto时，margin为0。这个问题，还是需要仔细思考一下的。
    到此为止，布局最基本的部分我们已经将去大半，还有就是一块浮动。

    正常文档流

    如果你选择没有用任何CSS来改变页面布局的网页，那么HTML元素就会排列在一个正常流（Normal Flow）之中。在正常流中，元素盒子（任何一个HTML元素其实就是一个盒子）会基于文档的写作模式一个接一个地排列（根据不同的文档写作模式，排列方向不一样）。这就意味着，如果你的写作模式是水平的（句子是从左到右或从右到左写），正常流会垂直地一个接一个排列页面的块级元素。如果你是在一个垂直方向的写作模式下，句子是垂直方向书写的，那么块级元素会水平方向排列。


    确保书写的页面具有良好的结构（HTML结构），可以最大程度复用正常文档流

    • 如果浏览器中没有正常流，那么你创建的HTML元素都会堆积在浏览器的右上角。这就意味着，你必须指定所有的HTML元素的布局方式。
    • 有了正常流，哪怕是CSS加载失败了，用户仍然能阅读你的页面内容；

    布局技术会覆盖默认的布局行为：
    **

    • display 属性 — 标准的value,比如block, inline 或者 inline-block 元素在正常布局流中的表现形式 (见 Types of CSS boxes). 接着是全新的布局方式，通过设置display的值, 比如 CSS Grid 和 Flexbox.
    • 浮动——应用 float 值，诸如 left 能够让块级元素互相并排成一行，而不是一个堆叠在另一个上面。
    • position 属性 — 允许你精准设置盒子中的盒子的位置，正常布局流中，默认为 static ，使用其它值会引起元素不同的布局方式，例如将元素固定到浏览器视口的左上角。
    • 表格布局— 表格的布局方式可以用在非表格内容上，可以使用display: table和相关属性在非表元素上使用。
    • 多列布局— 这个 Multi-column layout 属性 可以让块按列布局，比如报纸的内容就是一列一列排布的。

    拓展阅读 --> 

    脱离文档流

    一旦页面有一个良好的结构，你就需要去决定如何利用它并将它变为我们需要的布局结构。这会涉及到脱离正常文档流

    浮动


    float(浮动)

    浮动被用来将元素盒子向左或向右移动，同时让内容环绕其展示。
    要让一个元素进行浮动，需要给该元素的flaot属性设置为left或right。float的默认值为none。

    .item {
    float: left
}

    float 属性有四个可能的值：

    • left — 将元素浮动到左侧。
    • right — 将元素浮动到右侧。
    • none — 默认值, 不浮动。
    • inherit — 继承父元素的浮动属性。

    简单示例：

    将两个  

    元素排成一行。注意这两个 
    一个浮动值为 left，另外一个浮动为 right。这意味着它们其中一个往左靠，另外一个往右靠。给这两个元素分别设置 width 值，使得它们能够在同一行放下来，并且设置一个水平的间距(总宽度不要大于100%!).

    demo：
    https://codepen.io/AlexZ33/pen/povvOQd
    实践：
    https://game.xiaomi.com/

    需要注意的是， 当你使某个元素浮动并让文字环绕它时，内容的行框（Line Box）被缩短。如果你让一个元素浮动，同时为紧跟着的包含文本的元素设置一个背景颜色，你会发现背景色会出在浮动元素下方。

    如果想要在浮动元素和环绕的文本之间有一定的间距，需要给浮动元素设置margin。在文本元素上设置margin只会让其相对于容器缩进。例如在下面这个例子中，你就需要为左侧浮动的图片设置右边距和下边距。著作权归作者所有。

    https://codepen.io/AlexZ33/pen/WNbbgmO

    clear（清除浮动）

    一旦对一个元素进行了浮动，所有接下来的元素都会环绕它，直到内容处理它下方才开始应用正常文档流。如果想要避免这种情形，可以手动清除浮动。
    如果不想要在某个元素受到其之前的浮动元素影响时，可以为其添加clear属性。left值表示清除左边的浮动，right值表示清除右浮动，both值表示清除左右两边的浮动。

    .clear {
    clear: both;
}

     
    如果希望元素在浮动元素之后开始排列，那么上面的代码可以达到你的需求。如果你发现在容器内有一个浮动元素，同时容器内文本内容过短时，就会出现问题。文本盒子会被绘制在浮动元素下，然后接下来的部分会以正常流方式绘制在其后。著作权归作者所有。
    商业转载请联系作者获得授权,非商业转载请注明出处。

    更好的写法

    .clear::after {
  display: block;
  content: '';
  clear: both;
}

    典型的CSS清除浮动

    .clearfix:after {
 content: "."; 
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0; 
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

    新版清除浮动（2011）

    .clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }

    绝对定位

    定位

    定位的概念就是它允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。还有就是浮动了，其实浮动并不完全算是定位，它的特性非常的神奇，以至于它在布局中被人广泛的应用。我们会在后文中专门提及它的。
    谈及定位，我们就得从position属性说起。你能准确的说出position的属性值吗？相信你可以完美地说出这么六个属性值：static、relative、absolute、fixed、sticky和inherit。

    • static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
    • relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
    • absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
    • fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
    • sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址

    简单地，介绍一下position的属性值的含义后，在来看一下偏移量top、right、bottom、left四个属性。
    不清楚，当初在初学css的时候，会不会与margin这个属性混淆？其实，它们之间是很容易去辨识地。因为这四个属性值，其实是，定位时的偏移量。偏移量不会对static的元素起到作用。而margin，相对应的是盒子模型的外边距，它会对每个元素框起到作用，使得元素框与其他元素之间产生空白。
    下面：我们来看一下一些常用定位的偏移

    • relative：它的偏移是相对于原先在文档流中的位置，如图：
      relative-offset
    这里设置了top：100px，left：100px。
    • absolute：它的偏移量是相对于最近一级position不是static的祖先元素的
    • fixed：它的偏移量是相对于视口的。

    其实，这里说描述的内容，应该都是需要理解的。这些相对于布局来说是基础的，同时也是非常重要的。需要注意的是，这里的偏移量其实已经涉及到了接下来要说的尺寸。在做自适应布局设计时，往往希望这些偏移量的单位能够使用百分比，或者相对的单位例如rem等。

    fixed:

    实践：

    https://www.xiaomiyoupin.com/

    https://game.xiaomi.com/

    定位&居中

    水平居中

    (1). 行内元素的水平居中？

    如果被设置元素为文本、图片等 行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为 inline-block，使子元素变成行内元素 
    
  
    DEMO

    (2）块状元素的水平居中（定宽）

    当被设置元素为 定宽块级元素时用 text-align：center 就不起作用了。可以通过设置“左右margin”值为“auto”来实现居中的。 
    
  
    DEMO
    

    .child{
  width: 200px;
  margin: 0 auto;
}

    (3)块状元素的水平居中（不定定宽）**

    **

    **实际工作中我们会遇到需要为“不定宽度的块级元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。
    可以直接给不定宽的块级元素设置text-align：center来实现，也可以给父元素加text-align:center 来实现居中效果。
    当不定宽块级元素的宽度不要占一行时，可以设置display 为 inline 类型或inline-block（设置为 行内元素 显示或行内块元素） 

    
    

    .container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

    垂直居中

    和水平居中一样，这里要讲垂直居中，首先设定两个条件即父元素是盒子容器且高度已经设定

    1：子元素是行内元素，高度是由其内容撑开的

    这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中 

    
    111111

     .wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

    2：子元素是块级元素但是子元素高度没有设定


    在这种情况下实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整，但是还是存在一些解法。
    通过给父元素设定display:table-cell;vertical-align:middle来解决 
    
    
    11111
    

    .wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

    https://codepen.io/AlexZ33/pen/BaBvbEr

    3：子元素是块级元素且高度已经设定

    计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2 


    
    
    111111
    

      .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

    4、最常用方法

    怎么垂直对齐容器中的元素是最佳实践呢？
    • 现在，利用CSS3的Transform，可以很优雅的解决这个困惑：
    .verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

    使用这个技巧，从单行文本、段落到box，都会垂直对齐。目前浏览器对Transform的支持是需要关注的，
    Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9均支持该属性

    https://codepen.io/AlexZ33/pen/qBBewPE

    水平垂直居中

    1、水平对齐+行高

    text-align + line-height实现单行文本水平垂直居中 
    测试文字


    2、水平+垂直对齐

    1. text-align + vertical-align　　在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素


    **

    
  
    测试文字

    2.若子元素是 图像，可不使用table-cell，而是其父元素用 行高替代高度，且 字体大小设为0。子元素本身设置vertical-align:middle 
    
  test

    3、相对+绝对定位

    1、使用absolute，利用 绝对定位元素的 盒模型特性，在 偏移属性为确定值的基础上，设置margin:auto 
    


    
    
    
    
    Right

    浏览器中效果：

    此时可以看到，Right 部分的内容居中显示了。

    1、float + margin：

    
  
    定宽
    
  
    自适应
    

    .left{
  width: 200px;
  height: 600px;
  background: red;
  float: left;
  display: table;
  text-align: center;
  line-height: 600px;
  color: #fff;
}

.right{
  margin-left: 210px;
  height: 600px;
  background: yellow;
  text-align: center;
  line-height: 600px;
}


    示例1：

    示例2
    https://alexz33.github.io/

    两列自适应

    两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式
    **

    1.float+overflow:hidden实现

    如果是普通的两列布局， 浮动+普通元素的margin便可以实现，但如果是自适应的两列布局，利用 float+overflow:hidden便可以实现，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器 
    
    
    
        
    left
    
    
    
    
    
        
    right
    
        
    right
    
    
            

    

    .parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

    https://codepen.io/AlexZ33/pen/abzvjdb
    注意点:如果侧边栏在右边时，注意渲染顺序。即在HTML中，先写侧边栏后写主内容
    **

    2.Flex来实现

    Flex布局，也叫弹性盒子布局，区区简单几行代码就可以实现各种页面的的布局。

    //html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

    https://codepen.io/AlexZ33/pen/PowPBNJ

    3. grid布局实现

    Grid布局，是一个基于网格的二维布局系统，目的是用来优化用户界面设计

    //html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}

    https://codepen.io/AlexZ33/pen/MWYaBex

    三栏布局

    三栏布局在前端开发中特别常见，即两边定宽，中间宽度自适应。最优的实现目前是双飞翼布局，兼容性和语义、以及加载性能都很好。

    对于三栏布局，如下图：

    特征：中间列自适应宽度，旁边两侧固定宽度

    1、边栏固定中间自适应各方案对比

    https://codepen.io/AlexZ33/pen/OJPyEYg

    Float方法

    • 元素浮动后，脱离了文档流，左右两栏分别浮动到窗口的两边
    • 中间块紧跟在浮动元素之后，通过调整margin调整三者之间的间距
    • dom结构必须是先浮动，再中间块。

    实现
    .left {
    float: left;
    height: 200px;
    width: 200px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
    float: right;
}
.main {
    margin-left: 220px;
    margin-right: 220px;
    height: 200px;
    background-color: green;
}

    注意dom元素的顺序

    缺点
    • 由于dom顺序，无法先加载content
    • 显示的顺序和dom的顺序不一致，不好理解

    绝对定位方式

    绝对定位的元素也会脱离文档流，会相对于最近的定位的祖先元素进行定位。

    实现

    注意定位元素的设置

    .main {
    height: 200px;
    margin: 0 220px;
    background-color: green;
}
.left {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 0;
    background-color: red;
}
.right {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: blue;
    top: 0;
    right: 0;
}

    dom节点可以随意排列

    优缺点

    优点：
    • 可以按照dom的顺序排列，也可以将content排在前面。

    缺点：
    • 容器脱离了文档流，后代元素也脱离了文档流
    • 高度未知的时候，会有问题

    Table实现

    table的使用越来越少了。

    实现
    .container {
    display: table;
    width: 100%;
}
.left, .main, .right {
    display: table-cell;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.main {
    background-color: green;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
}

    优缺点

    优点：

    • 兼容性良好

    缺点：

    • 无法设置栏边距
    • 对seo不友好
    • 高度会同时增加

    grid布局

    CSS Grid Layout的兼容性的确还是不容乐观，不过看起来也是已经一片绿了，api有可能还会变动，但是使用起来简单方便。

    .container {
    display: grid;
    width: 100%;
    grid-template-rows: 200px;
    grid-template-columns: 200px auto 200px;
}
.left {
    background-color: red;
}
.main {
    margin: 0 20px;
    background-color: green;
}
.right {
    background-color: blue;
}

    Flex布局

    lex给我们布局提供很大的便利，很多在css2.1时代实现的很麻烦的布局，都可以通过flex很容易的实现，而且语义也很好。对三栏布局的实现，主要用到了flew-grow(发大比例，默认为0),flex-shrink（缩小比例，默认为1）,flex-basis(计算是否有多余空间，默认为auto)。可以使用这三个属性的缩写形式，建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
    **

    // 默认值为0 1 auto
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

// 有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
    .container {
    display: flex;
}
.main {
    flex: 1;
    margin: 0 20px;
    height: 200px;
    background-color: green;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    width: 200px;
    height: 200px;
    background-color: blue;
}

    2、圣杯布局

    实现这些的目的就是在实现布局的基础上，content在dom的最前面，同时又有很好的兼容性。

    .container {
    margin-left: 220px;       /* 为左右栏腾出空间 */
    margin-right: 220px;
}
.main {
    float: left;
    width: 100%;
    height: 200px;
    background-color: green;
}
.left {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    position: relative;
    left: -220px;
    background-color: red;
}
.right {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
    position: relative;
    right: -220px;
    background-color: blue;
}

    DOM结构为中-左-右。.container设置margin-left和margin-right为左右栏腾出空间。

    分析

    • 给外围的container加上padding：0 220px 0 220px
    • 将main部分放在最初的位置，加载最早，为了实现这样，只有将三者都采用float：left,为了调整两边栏的位置，给边栏再加上一个position:relative (因为相对定位后面会用到）
    • main部分因为需要自适应，width:100%占满宽度，因此这个时候边栏都在下面一行。

    • 这时因为main已经占满了，为了将left拉倒最左边，需要使用margin-left:-100%

    • 这时right还停留在原来的位置，让right向左移动一个身位，marign-left:-200px，right就可以来到上方的最右边。

    • 这时left会覆盖main的左端，对left使用使用相对定位left:-220px，同理right也要相对定位还原right:-220px

    详解：

    https://codepen.io/AlexZ33/pen/QWWXpWx

    ① 特点

    比较特殊的三栏布局，同样也是两边固定宽度，中间自适应，唯一区别是dom结构必须是先写中间列部分，这样实现中间列可以优先加载

    ② 实现步骤

    • 三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行

    • 通过设置margin-left为负值让left和right部分回到与center部分同一行

    • 通过设置父容器的padding-left和padding-right，让左右两边留出间隙。

    • 通过设置相对定位，让left和right部分移动到两边。

    ③ 缺点

    • center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
    • 如果其中一列内容高度拉长(如下图)，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决，下文会介绍)

    3、双飞翼布局

    杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，增加多一个div就可以不用相对布局了，只用到了浮动和负边距。
    该布局的出现是出于让圣杯布局更好理解，语义化更好的目的。

    .main {
    float: left;
    width: 100%;
    height: 200px;

}

.left {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -100%;
    /*  position: relative;
    left: -220px;         */
    background-color: red;
}

.right {
    float: left;
    width: 200px;
    height: 200px;
    margin-left: -200px;
    /*  position: relative;
        right: -220px;         */
    background-color: blue;
}

.inner {
    margin: 0 220px;
    height: 200px;
    background-color: green;
}

    给main添加一个包裹，类似张鑫旭大神提出的“宽度分离准则”，利用这个准则就可以很好的利用块元素的流体特性，铺满可用空间。

    分析

    先将main部分放好，然后再将“翅膀”移动到相应的位置。

    • main放在dom的最前面，紧接着是left、right
    • 三部分都是float:left
    • 将main铺满width:100%
    • 这时将left拉上去margin-left：-100%，同理right使用margin-right:-200px。一直到这里都和圣杯布局很类似
    • main被占满了，除了使用container的padding（圣杯），还可以给main增加一个内层div包裹，添加margin: 0 220px 0 220px
    • 这时就可以了

    详解

    ① 特点

    同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。 
        .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
     }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }
        
    
        
    
            
    双飞翼布局

    ② 实现步骤(前两步与圣杯布局一样)

    • 三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；
    • 通过设置margin-left为负值让left和right部分回到与center部分同一行；
    • center部分增加一个内层div，并设margin: 0 200px；

    ③ 缺点

    多加一层 dom 树节点，增加渲染树生成的计算量。

    两种布局实现方式对比:

    • 都是把主列放在文档流最前面，使主列优先加载。
    • 实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
    • 不同之处在于如何处理中间主列的位置：

    圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
    双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

    总结

    对于中间自适应的实现，我们需要利用其流体特性，而因为我们又必须考虑兼容性，又要让main最先加载到dom中，对整体的布局影响又较小。
    简单的Float方式dom的顺序不可修改，main需要最后添加；绝对布局的方式脱离了文档流，对布局影响较大；Table布局会越来越少，而且其高度、间隔的也有限制；flex,grid的方式兼容性还是个问题；圣杯布局虽好，但是position:realtive和相对定位的添加，使得代码不好理解，可维护性较差。
    综合分析，双飞翼布局相对于圣杯布局，增加了一个div，完美使用了宽度分离准则，使得代码更好理解，可维护性最高。

    等高布局

    等高布局是指子元素在父元素中高度相等的布局方式。接下来我们介绍常见几种实现方式：

    1.利用正padding+负margin

    我们通过等布局便可解决圣杯布局的第二点缺点，因为背景是在 padding 区域显示的，设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，并在所有列外面加上一个容器，并设置 overflow:hidden 把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下

     .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;//把溢出背景切掉
      }

    https://codepen.io/AlexZ33/pen/rNaOryX


    2.利用背景图片

    这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假象。实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现,但此方法不适合流体布局等高列的布局。
    在制作样式之前需要一张类似下面的背景图：

    
    
    
    
    
    
    

    .container {
  background: url("column.png") repeat-y;
  width: 960px;
  margin: 0 auto;
}
.left {
  float: left;
  width: 220px;
}
.content {
  float: left;
  width: 480px;
}
.right {
  float: left;
  width: 220px;
}

    3.模仿表格布局

    这是一种非常简单，易于实现的方法。不过兼容性不好，在ie6-7无法正常运行。

     
    
      
    
        
    
          
    
            ....
          
    
        
    
        
    
          
    
            ...
          
    
        
    
        
    
          
    
            ...
          
    
        
    
      
    
    
    .table {
  width: auto;
  min-width: 1000px;
  margin: 0 auto;
  padding: 0;
  display: table;
}
.tableRow {
  display: table-row;
}
.tableCell {
  display: table-cell;
  width: 33%;
}
.cell1 {
  background: #f00;
  height: 800px;
}
.cell2 {
  background: #0f0;
}
.cell3 {
  background: #00f;
}

    4.使用边框和定位

    这种方法是使用边框和绝对定位来实现一个假的高度相等列的效果。结构简单，兼容各浏览器，容易掌握。假设你需要实现一个两列等高布局，侧栏高度要和主内容高度相等。

    #wrapper {
  width: 960px;
  margin: 0 auto;
}
#mainContent {
  border-right: 220px solid #dfdfdf;
  position: absolute;
  width: 740px;
  height: 800px;  
  background: green;
}
#sidebar {
  background: #dfdfdf;
  margin-left: 740px;
  position: absolute;
  height: 800px;
  width: 220px;
}

    
    
    ...

    5. display:table实现多列等高布局

    6. display:flex实现多列等高布局

    https://codepen.io/AlexZ33/pen/ExaVpYB

    粘连布局

    1.特点

    • 有一块内容
      ，当
      的高度足够长的时候，紧跟在
      后面的元素
      会跟在
      元素的后面。
    • 当
      元素比较短的时候(比如小于屏幕的高度),我们期望这个
      元素能够“粘连”在屏幕的底部

      
    
      
    
        main 
    
        main 
    
        main 
    
      
    
    
    
    
    * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一层层继承下来
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

    2.实现步骤

    (1)footer必须是一个独立的结构，与wrap没有任何嵌套关系
    (2)wrap区域的高度通过设置min-height，变为视口高度
    (3)footer要使用margin为负来确定自己的位置
    (4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

    flex布局

    • 盒子排成一行

    demo：

    https://codepen.io/AlexZ33/pen/GRRbwxZ

    实践：

    • 父元素100%宽度


    https://codepen.io/AlexZ33/pen/ExxBOEG

    • 我们可以给每个子盒子用  width: 25% ,它确实能够生效，但是flexbox弹性盒子自己就是可伸缩的，我们没必要给它一个具体的width  。比如用 flex: 1 ,应用到子组件，让他们能够伸缩填充整个空间

    https://codepen.io/AlexZ33/pen/MWWMzXG

    •  更复杂点呢，我们其实不用做任何数学计算和硬编码就能实现一个文字文本布局

    https://codepen.io/AlexZ33/pen/qBBzgqP

    • 你还可以

    https://codepen.io/AlexZ33/pen/qBBzgRV

    • 当页面缩小的时候


    https://codepen.io/AlexZ33/pen/qBBzgRV?editors=1100


    https://codepen.io/AlexZ33/pen/qBBzgRV

    • 如果我想我自己的 box排在第一个呢, 我可以重新编辑盒子顺序（order), 使用 order: -1 

    https://codepen.io/AlexZ33/pen/bGGPzPV

    • 给我的块 占一行 flex-basis: 100% 

        https://codepen.io/AlexZ33/pen/bGGPzPV

    • 当屏幕小于600px时候纵向排布，并且子box占据一行

      • flex-direction: column;
      • display: block;（与其更改所有的flexbox内容以处理列布局，不如将其关闭。）

    https://codepen.io/AlexZ33/pen/QWWXREe

    利用 Flexbox 去除多余的外边距

    与其使用 nth-， first-， 和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性：

    .list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

    常用经典布局

     

    作业

    1、 任选一个卡片，实现其布局

    参考进度条
    https://c.runoob.com/codedemo/3105

    参考五星（纯css实现，正常项目我们用的贴图）
    https://codepen.io/JowayYoung/pen/MWgjGMj

    2、应用今天所学， 实现task02的页面 -->如图  



    3、分别尝试使用Float、Position或者Flexbox来实现如下需求：

    • 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度
    • 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化
    • 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化
    • 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化
    • 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

    要求：

    • 每一个需求都尽可能多地用多种方式来实现

    vscode常见快捷键

    shift+alt+↓是快速复制当前行到下一行

    拓展阅读

    如果有同学觉得太简单，不妨花上3个小时来阅读 CSS 的标准文档，至于看标准规范有什么用，欢迎移步看CSS专家顾轶灵的知乎回答，以及貘吃馍香的回答。另外HTML也是，有时间可以读一下规范，这样你也可以像这样回答问题

    你可能感兴趣的:(css)

    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • webpack图片等资源的处理 dmengmeng
      需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
    • 《HTML 与 CSS—— 响应式设计》 陈在天box htmlcss前端
      一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
      html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
      1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    • 360前端星计划-动画可以这么玩 马小蜗
      动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    • css2中的透明 琪33
      .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
    • Nginx从入门到实践(三) 听你讲故事啊
      动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
      Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    • Python精选200Tips：121-125 AnFany Python200+Tipspython开发语言
      Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例
    • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
      边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
    • 爬虫技术抓取网站数据 Bearjumpingcandy 爬虫
      爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文
    • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
      前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
    • HTML中"bgcolor"与"background-color"的区别 Sardar_ html
      bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou
    • 2019-05-29 vue-router的两种模式的区别 Kason晨
      1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
    • 清除 Conda 缓存 Dmatteratall conda缓存
      清除Conda缓存：cssCopycodecondaclean--allcondaclean--all命令将会清除Conda缓存和临时文件，而不会删除已经安装的软件包和环境。它主要用于清理不必要的缓存和临时文件以释放磁盘空间。
    • electron多标签页模式更像客户端 diygwcom electronjavascript前端
      Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
    • 前端HTML+CSS+JS的入门学习 俊昭喜喜里 前端htmlcss
      一.HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，是用于创建网页和网页应用程序的标准标记语言。它不是一种编程语言，而是一种标记语言，通过一系列的元素（elements）来告诉浏览器如何显示网页上的内容，如文本、图片、链接、表格、列表等。HTML文档由一系列的标签（tags）组成，这些标签告诉浏览器如何显示内容。标签通常成对出现，例如和，其中是开始标签，表示一个
    • 10/24 每周学习总结5 木木ainiks 1024程序员节
      1RecordingtheMoolympicsS#include#includeusingnamespacestd;typedeflonglongint_1;intn;structnode{int_1begin_b;int_1end_e;}a[300];boolcmp(nodea,nodeb){if(a.end_e==b.end_e)returna.begin_b>b.begin_b;return
    • HTML5概述 WFIT~SKY Web前端html5前端html
      1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
    • CSS中如何实现鼠标悬停效果？ 神明木佑 css前端
      在CSS中，您可以使用:hover伪类来实现鼠标悬停效果。:hover伪类会在用户将鼠标悬停在选择器所匹配的元素上时应用指定的样式。下面是一个简单的例子，展示了如何在鼠标悬停时改变文本颜色和背景颜色：MouseHoverExample.hover-effect{color:black;background-color:white;padding:10px;text-align:center;}.h
    • js的书写位置和css的书写位置的区别？为什么要这样写？ 李是啥也不会 javascriptcss开发语言
      JavaScript和CSS的书写位置有以下区别：CSS通常写在标签中，或者在外部样式表文件中（）。CSS主要用于控制页面的视觉样式和布局，通常在HTML文件的部分引入，以确保在页面渲染时样式已经加载完毕，从而避免样式闪烁。JavaScript通常写在标签中，或者在外部脚本文件中（）。JavaScript用于添加页面的动态行为和交互。一般建议将JavaScript放在HTML文件的末尾（标签之前）
    • 【H2O2|全栈】关于CSS（3）CSS基础（三） 过期的H2O2 【H2O2】CSS入门css前端
      目录CSS基础知识前言准备工作盒模型概念内容的宽高displaypaddingborderborder-widthborder-styleborder-colormargin预告和回顾后话CSS基础知识前言本系列博客将分享层叠样式表（CSS）有关的知识点。作为本系列的第三篇，本博客将分享盒模型以及页面布局有关的知识点。不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。准备工作软件：
    • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
      css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
    • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
      作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
    • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
      需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
    • 基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板 abments 实用小工具javascript前端html
      效果图基于HTML+JS+CSS+Echarts实现的设备环境监测可视化平台前端整套模板。可用过修改源码快速完成需求。源码结构下载地址
    • unocss 一直热更新打印[vite] hot updated: /__uno.css 柳雾青烟紫燕穿 csscss3vue
      控制台持续打印了几千条这条信息，页面逐渐卡死client.ts:450[vite]hotupdated:/__uno.css找出的原因是：依赖出问题了，重新安装unocss，执行命令npmiunocss后修复。但奇怪的是，删除node_modules重新全部安装依赖却不能修复，tmd。还有一种解决方法是切换分支，切去其它分支，再切回来，也不会再打印了。一开始还怀疑了是哪里的unocss类名一直在监
    • 异常的核心类Throwable 无量 java源码异常处理exception
      java异常的核心是Throwable，其他的如Error和Exception都是继承的这个类 里面有个核心参数是detailMessage，记录异常信息，getMessage核心方法，获取这个参数的值，我们可以自己定义自己的异常类，去继承这个Exception就可以了，方法基本上，用父类的构造方法就OK，所以这么看异常是不是很easy package com.natsu;
    • mongoDB 游标（cursor） 实现分页 迭代 开窍的石头 mongodb
      上篇中我们讲了mongoDB 中的查询函数，现在我们讲mongo中如何做分页查询      如何声明一个游标        var mycursor = db.user.find({_id:{$lte:5}});       迭代显示游标数
    • MySQL数据库INNODB 表损坏修复处理过程 0624chenhong tomcatmysql
      最近mysql数据库经常死掉，用命令net stop mysql命令也无法停掉，关闭Tomcat的时候，出现Waiting for N instance(s) to be deallocated 信息。查了下，大概就是程序没有对数据库连接释放，导致Connection泄露了。因为用的是开元集成的平台，内部程序也不可能一下子给改掉的，就验证一下咯。启动Tomcat,用户登录系统，用netstat -
    • 剖析如何与设计人员沟通 不懂事的小屁孩 工作
      最近做图烦死了，不停的改图，改图……。烦，倒不是因为改，而是反反复复的改，人都会死。很多需求人员不知该如何与设计人员沟通，不明白如何使设计人员知道他所要的效果，结果只能是沟通变成了扯淡，改图变成了应付。 那应该如何与设计人员沟通呢？ 我认为设计人员与需求人员先天就存在语言障碍。对一个合格的设计人员来说，整天玩的都是点、线、面、配色，哪种构图看起来协调；哪种配色看起来合理心里跟明镜似的，
    • qq空间刷评论工具 换个号韩国红果果 JavaScript
      var a=document.getElementsByClassName('textinput'); var b=[]; for(var m=0;m<a.length;m++){ if(a[m].getAttribute('placeholder')!=null) b.push(a[m]) } var l
    • S2SH整合之session 灵静志远 springAOPstrutssession
      错误信息： Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'cartService': Scope 'session' is not active for the current thread; consider defining a scoped
    • xmp标签 a-john 标签
      今天在处理数据的显示上遇到一个问题： var html = '<li><div class="pl-nr"><span class="user-name">' + user + '</span>' + text + '</div></li>'; ulComme
    • Ajax的常用技巧（2）---实现Web页面中的级联菜单 aijuans Ajax
      在网络上显示数据，往往只显示数据中的一部分信息，如文章标题，产品名称等。如果浏览器要查看所有信息，只需点击相关链接即可。在web技术中，可以采用级联菜单完成上述操作。根据用户的选择，动态展开，并显示出对应选项子菜单的内容。 在传统的web实现方式中，一般是在页面初始化时动态获取到服务端数据库中对应的所有子菜单中的信息，放置到页面中对应的位置，然后再结合CSS层叠样式表动态控制对应子菜单的显示或者隐
    • 天-安-门，好高 atongyeye 情感
          我是85后，北漂一族，之前房租1100，因为租房合同到期，再续，房租就要涨150。最近网上新闻，地铁也要涨价。算了一下，涨价之后，每次坐地铁由原来2块变成6块。仅坐地铁费用，一个月就要涨200。内心苦痛。     晚上躺在床上一个人想了很久，很久。        我生在农
    • android 动画 百合不是茶 android透明度平移缩放旋转
      android的动画有两种  tween动画和Frame动画   tween动画;,透明度,缩放,旋转,平移效果   Animation   动画 AlphaAnimation 渐变透明度 RotateAnimation 画面旋转 ScaleAnimation 渐变尺寸缩放 TranslateAnimation 位置移动 Animation
    • 查看本机网络信息的cmd脚本 bijian1013 cmd
      @echo 您的用户名是：%USERDOMAIN%\%username%>"%userprofile%\网络参数.txt" @echo 您的机器名是：%COMPUTERNAME%>>"%userprofile%\网络参数.txt" @echo ___________________>>"%userprofile%\
    • plsql 清除登录过的用户 征客丶 plsql
      tools---preferences----logon history---history  把你想要删除的删除 -------------------------------------------------------------------- 若有其他凝问或文中有错误，请及时向我指出， 我好及时改正，同时也让我们一起进步。 email ： binary_spac
    • 【Pig一】Pig入门 bit1129 pig
      Pig安装 1.下载pig   wget http://mirror.bit.edu.cn/apache/pig/pig-0.14.0/pig-0.14.0.tar.gz   2. 解压配置环境变量      如果Pig使用Map/Reduce模式，那么需要在环境变量中，配置HADOOP_HOME环境变量   expor
    • Java 线程同步几种方式 BlueSkator volatilesynchronizedThredLocalReenTranLockConcurrent
      为何要使用同步？      java允许多线程并发控制，当多个线程同时操作一个可共享的资源变量时（如数据的增删改查），      将会导致数据不准确，相互之间产生冲突，因此加入同步锁以避免在该线程没有完成操作之前，被其他线程的调用，      从而保证了该变量的唯一性和准确性。 1.同步方法&
    • StringUtils判断字符串是否为空的方法（转帖） BreakingBad nullStringUtils“”
      转帖地址：http://www.cnblogs.com/shangxiaofei/p/4313111.html   public static boolean isEmpty(String str)   　　判断某字符串是否为空，为空的标准是 str== null  或 str.length()== 0  
    • 编程之美-分层遍历二叉树 bylijinnan java数据结构算法编程之美
      import java.util.ArrayList; import java.util.LinkedList; import java.util.List; public class LevelTraverseBinaryTree { /** * 编程之美 分层遍历二叉树 * 之前已经用队列实现过二叉树的层次遍历，但这次要求输出换行，因此要
    • jquery取值和ajax提交复习记录 chengxuyuancsdn jquery取值ajax提交
      // 取值 // alert($("input[name='username']").val()); // alert($("input[name='password']").val()); // alert($("input[name='sex']:checked").val()); // alert($("
    • 推荐国产工作流引擎嵌入式公式语法解析器-IK Expression comsci java应用服务器工作Excel嵌入式
      这个开源软件包是国内的一位高手自行研制开发的，正如他所说的一样，我觉得它可以使一个工作流引擎上一个台阶。。。。。。欢迎大家使用，并提出意见和建议。。。 ----------转帖--------------------------------------------------- IK Expression是一个开源的（OpenSource），可扩展的（Extensible），基于java语言
    • 关于系统中使用多个PropertyPlaceholderConfigurer的配置及PropertyOverrideConfigurer daizj spring
      1、PropertyPlaceholderConfigurer Spring中PropertyPlaceholderConfigurer这个类，它是用来解析Java Properties属性文件值，并提供在spring配置期间替换使用属性值。接下来让我们逐渐的深入其配置。 基本的使用方法是：(1) <bean id="propertyConfigurerForWZ&q
    • 二叉树:二叉搜索树 dieslrae 二叉树
          所谓二叉树,就是一个节点最多只能有两个子节点,而二叉搜索树就是一个经典并简单的二叉树.规则是一个节点的左子节点一定比自己小,右子节点一定大于等于自己(当然也可以反过来).在树基本平衡的时候插入,搜索和删除速度都很快,时间复杂度为O(logN).但是,如果插入的是有序的数据,那效率就会变成O(N),在这个时候,树其实变成了一个链表. tree代码:
    • C语言字符串函数大全 dcj3sjt126com cfunction
      C语言字符串函数大全     函数名: stpcpy 功 能: 拷贝一个字符串到另一个 用 法: char *stpcpy(char *destin, char *source); 程序例:   #include <stdio.h> #include <string.h>   int main
    • 友盟统计页面技巧 dcj3sjt126com 技巧
      在基类调用就可以了, 基类ViewController示例代码 -(void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; [MobClick beginLogPageView:[NSString stringWithFormat:@"%@",self.class]];
    • window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 flyvszhb javajdk
      window下在同一台机器上安装多个版本jdk，修改环境变量不生效问题处理办法 本机已经安装了jdk1.7，而比较早期的项目需要依赖jdk1.6，于是同时在本机安装了jdk1.6和jdk1.7. 安装jdk1.6前，执行java -version得到 C:\Users\liuxiang2>java -version java version "1.7.0_21&quo
    • Java在创建子类对象的同时会不会创建父类对象 happyqing java创建子类对象父类对象
        1.在thingking in java 的第四版第六章中明确的说了，子类对象中封装了父类对象，   2."When you create an object of the derived class, it contains within it a subobject of the base class. This subobject is the sam
    • 跟我学spring3 目录贴及电子书下载 jinnianshilongnian spring
          一、《跟我学spring3》电子书下载地址： 《跟我学spring3》  （1-7 和 8-13） http://jinnianshilongnian.iteye.com/blog/pdf     跟我学spring3系列 word原版 下载     二、 源代码下载 最新依
    • 第12章 Ajax（上） onestopweb Ajax
      index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
    • BI and EIM 4.0 at a glance blueoxygen BO
      http://www.sap.com/corporate-en/press.epx?PressID=14787   有机会研究下EIM家族的两个新产品~~~~   New features of the 4.0 releases of BI and EIM solutions include: Real-time in-memory computing –
    • Java线程中yield与join方法的区别 tomcat_oracle java
      长期以来，多线程问题颇为受到面试官的青睐。虽然我个人认为我们当中很少有人能真正获得机会开发复杂的多线程应用(在过去的七年中，我得到了一个机会)，但是理解多线程对增加你的信心很有用。之前，我讨论了一个wait()和sleep()方法区别的问题，这一次，我将会讨论join()和yield()方法的区别。坦白的说，实际上我并没有用过其中任何一个方法，所以，如果你感觉有不恰当的地方，请提出讨论。 &nb
    • android Manifest.xml选项 阿尔萨斯 Manifest
      结构 继承关系 public final class Manifest extends Objectjava.lang.Objectandroid.Manifest 内部类 class Manifest.permission权限 class Manifest.permission_group权限组 构造函数 public Manifest () 详细 androi
    • Oracle实现类split函数的方 zhaoshijie oracle
      关键字：Oracle实现类split函数的方 项目里需要保存结构数据，批量传到后他进行保存，为了减小数据量，子集拼装的格式，使用存储过程进行保存。保存的过程中需要对数据解析。但是oracle没有Java中split类似的函数。从网上找了一个，也补全了一下。 CREATE OR REPLACE TYPE t_split_100 IS TABLE OF VARCHAR2(100); cr
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他