CSS笔记

CSS

• 什么是CSS

  • CSS的作用是:可以给网页中的每一个元素设置样式("化妆"、排版布局),让网页更加精美。

  • 完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片

  • CSS全称是Cascading Style Sheets. 层叠样式表

CSS样式书写格式

• CSS提供了各种各样、丰富多彩的CSS样式，书写格式如下所示

color: red

• 冒号左边是样式名，冒号:右边是样式值

如何将CSS样式应用到元素上？

• CSS提供了3种方法、可以 将CSS样式应用到元素上

  • 内联样式(inline style)
  • 文档样式表(document style sheets)、内嵌样式表(embed style style sheet)
  • 外部样式表 (external style sheet)

内联样式

• 将样式直接写在元素的style属性上

文字内容

• CSS样式之间用;隔开,建议每条CSS样式后面都加上分号;

• 在很多国内外资料中，CSS样式 与 CSS属性 是一个意思

  • 样式名 对应的 属性名
  • 样式值 对应的 属性值

• 有些人也把inline 翻译为"行内"，用"内联"更合适，表示"内部自带"的意思

文档样式表

• 将样式写在head元素中的style元素

• 

  设置网页图标

  • link元素除了可以用来引入CSS文件，还可以设置网页的图标(href的值是图标链接)
  image.png
  • link元素的rel属性不能省略，用来指定文档与链接资源的关系
  • 一般rel若确定，相应的type也会默认确定，所有可以省略type
  • 网页图标支持的图片格式化是ico、png，常用大小是16x16、24x24、32x32(单位：像素)

  常用CSS属性

  • 按照CSS属性的具体用途，大致可以分类为

    • 文本:color、direction、letter-spacing、word-spacing、line-height、text-align、text-transform、text-decoration、white-space

    • 字体：font、font-family、font-style、font-size、font-variant、font-weight

    • 背景：background、background-color、background-image、background-repeat、background-attachment、background-positioin

    • 盒子模型: width、height、border、margin、padding

    • 列表：list-style

    • 表格：border-collapse

    • 显示：display、visibility、overflow、opacity、filter

    • 定位：vertical-align、 position、left、top、right、bottom、float、clear

  最常用的CSS属性值

  • color：前景色(文字颜色)
  • background：背景色
  • width：宽度
  • height：高度
  • font-size：文字大小

  background-color

  • background-color 决定背景色

  color

  • color属性用来设置文本内容的前景色
    • 包括文字、装饰线、边框、轮廓等的颜色

  span元素

  • 默认情况下，跟普通文件几乎没有差别

  • 用与区分特殊文本和普通文本，比如用来显示一些关键字

    
    
    image.png

  div元素

  • 一般作为其他元素的父容器，把其他元素包住，代表一个整体
  • 用于把网页分割为多个独立的部分

  CSS属性可用性

  • 由于浏览器版本、CSS版本等问题，有些CSS属性是无法使用的

    • 可以到https://caniuse.com/查询CSS属性的版本

  颜色

  • 颜色有几下几种表示方法

    • 基本颜色关键字

      • red：红色、black：黑色、yellow：黄色等
      • 只提供了上百种基本颜色的关键字

  span {
     background-color: red;
  }
  

  • RBG颜色

    • 十进制：rgb(red,green,blue)
    • 十六进制：#rrggbb、#rgb

  
          span {
              /*    十进制*/
              background-color: rgb(255,0,0);
              /*    十六进制*/
              background-color: #ff0000;
              /* 或者*/
              background-color: #f00;
          }
  

  • RGBA颜色

    • rgba(red,green,blue,alpha)

    • alpha取值范围是0.0~1.0,表示透明度，数值越大越不透明

    • background-color: rgba(255,0,0,5)

  CSS属性-字体

  font-size

  • font-size决定文字大小

  • 常用设置

    • 具体数字 + 单位
      • 比如100px
      • 也可以使用em单位：1em代表100%、2em代表200%、0.5em代表50%

  • 百分比

    • 基于父元素的font-size计算，比如50%表示等于父元素的font-size的一半

  • 一般给body设置font-size就代表设置网页的默认字体大小

    • 其他元素可以基于父元素设置字体大小
    • 到时候只需要改变body的字体大小，其他元素都会按照比例改变

  font-family

  • font-family用于设置文字的字体名称

  • 可以设置1个或者多个字体名称(从左到右按顺序选择字体，直到找到可以用的字体为止)

    • font-family: Consolas;
    • font-family: "微软雅黑","Consolas","Symbol","Microsoft Sans Serif";

  • 一般情况下，英文字体只适用于英文，中文字体同时适用于英文和中文

    • 所以，如果希望中英文分别使用不同的字体，应该先将英文字体写在前面，中文字体写在后面

         div {
              font-family: "Courier New","华文彩云";
          }
  

  @font-face

  • @font-face可以让网页支持网络字体(Web Font),不在局限于系统自带字体

  • 常见的字体种类

    • TrueType字体：拓展名是 .ttf
    • OpenType字体：拓展名是.ttf、otf，建立在TrueType字体之上
    • Embedded OpenType 字体：扩展名是.eot,OpenType字体的压缩版
    • SVG字体：扩展名是.svg、.svgz
    • web开放字体：扩展名是.woff,建立在TrueType字体之上

  • 并不是所有的浏览器都支持以上字体，使用时要多加测试

  • 字体下载：http://font.chinaz.com/

  • font-face使用

  
  
  
      
      
      
  
  
  hello!我是微米体
  
  
  
  

  image.png

  font-weight

  • font-weight用于设置文字的粗细(重量)
    • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
    • normal：等于400
    • bold：等于700
  • strong、b、h1~h6等标签的font-weight默认就是bold

  font-sytle

  • 用于设置文字的常规、斜体显示
    • normal：常规显示
    • italic：用字体的斜体显示
    • oblique：文本倾斜显示
    • italic和oblique区别：
      • italic 字体本身带有倾斜属性，如果没有使用它没有用
      • oblique有些字体没有倾斜这个属性，这个时候就只能用他了。
  • em、i、cite、address、var、dfn这些元素的font-style默认就是italic

  font-variant

  • 可以影响小写字母的显示形式
  • 可以设置的值如下：
    • normal：常规显示
    • samll-caps：将小写字母替换为缩写过的大写字母

  
  
  
      
      
      
  
  
  123,GO!What's wrong?
  
  
  
  

  image.png

  line-height

  • line-height用于设置文本的最小行高
  • 行高可以先简单理解为一行文字所占的高度
  • 行号的严格定义是：两行文字基线之间的距离

  • 基线(baseline)：与小写字母x最底部对齐的线

    
    
    image.png
  • 可以设置的值如下
    • 具体的单位：比如40px
    • 百分比：比如200%，最终的行高值使用百分比乘以元素的字体大小
      • 如果是写百分比，继承下来的就是经过计算后的像素值
    • noraml：常规显示，浏览器会基于元素字体调整一个合理值，范围在1.0~1.2
  • 注意区分height和line-height的区别
  • height：元素的整体高度
  • line-height：元素中每一行文字所占据的高度
    
    image.png
    
    
    image.png
  • line-height设置的仅仅是最小行高，不能决定最终行高

  font

  • 是一个缩写属性
  • font-style、font-variant、font-weight、font-size/ling-height、font-family

  div {
     font: italic small-caps 700 20px/40px "微软雅黑" ;
  }
  

  • font-style、font-variant、font-weight可以随意调换顺序,也可以省略
  • /line-height可以省略,如果不省略，必须跟在font-size后面
  • font-size，font-family不可以调换顺序，不可以省略

  CSS属性-文本

  text-decoration

  • 用于设置文字的装饰线

    • none：无任何装饰线
    • underline：下划线
    • overline： 上划线
    • line-through：中划线(删除线)

  • u、ins元素默认就是设置了text-decoration为underline

  letter-spacing word-spacing

  • 分别用于设置字母、单词之间的间距
  • 默认是0，可以设置为负数

  text-transform

  • 用于设置文字的大小转换
  • 可以设置以下值
    • capitalize: 将每个单词的首字符变为大写
    • uppercase：将每个单词所有的字符变为大写
    • lowercase：将每个单词的所有字符变为小写
    • none：没有任何影响

  text-indent

  • 用于设置第一行内容的缩进

  • text-indnt：2em;刚好是缩进2个文字

    
    
    image.png

  text-align

  • 可用于设置元素内容在元素中的水平对齐方式
  • 常用的值
    • left：左对齐
    • right：右对齐
    • center：正中间显示
    • justify：两端对齐

  CSS选择器

  • 开发中经常需要找打特定的网页元素进行设置样式
  • 什么是CSS选择器
    • 按照一定的规则选出符合条件的元素，为之添加CSS样式
  • 选择器的种类繁多，大概可以这么归类
    • 通用选择器(universal selector)
    • 元素选择器(type selectors)
    • 类选择器(class selectors)
    • id选择器(id selectors)
    • 属性选择器(attribute selectors)
    • 组合(combinators)
    • 伪类(pseudo-class)
    • 伪元素(pseudo-elements)

  元素选择器(type selectors)

  • 所有的div元素

  div {
  color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  文字内容4
  
  

  image.png
  • 或者叫做"标签选择器"

  通用选择器

  • 所有的元素

  * {
  color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  
  

  image.png
  • 一般用来给我所有元素做一些通用性的设置
    • 比如内边距、外边局
    • 参考：http://www.jd.com
  • 效率比较低，尽量不要使用

  id选择器

  • id值为one的元素

  #one {
    color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  
  

  image.png
  • id注意点
    • 一个HTML文档里面的id值是唯一的，不能重复
    • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接,也可以使用驼峰标识。
    • 最好不要用标签名作为id值

  文字内容3
  
   
  
  
   
  
  
   
  
  

  • 中划线又叫连字符

  类选择器

  • class值有one元素

         .one {
             color: red;
         }
  

  
  文字内容1
  文字内容2
  文字内容3
  文字内容4
  
  

  image.png
  • class注意点
    • 一个元素可以有多个class值，每个class之间使用空格隔开
    • class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识.
    • 最好不要用标签名作为class的值

  属性选择器(attribute slecotors)

  • 拥有title属性的元素

  [title] {
         color: red;
  }
  

  
  文字内容1
  文字内容2
  
      
  文字内容3
  
  文字内容4
  
  

  image.png

  • 属性选择器 - [att=val]

    • title 属性值恰好等于one的元素

      [title="one"] {
              color: red;
          }
    

    
    文字内容1
    文字内容2
    
        
    文字内容3
    
    文字内容4
    
    

    image.png

  • 属性控制器 - [attr~=val]

    • title属性值包含单词one的元素(单词one与其他单词之间必须用空格隔开)

    [title~="one"] {
             color: red;
      }
    

    
    文字内容1
    文字内容2
    文字内容3
    文字内容4
    文字内容5
    文字内容6
    文字内容7
    文字内容8
    文字内容9
    
    

    image.png

  • 属性选择器 - [attr|=vale]

    • title属性值恰好等于one或者以单词one开头且后面紧跟着连字符-元素
    • 一般使用在lang属性上面

      [lang|="en"] {
                color: red;
            }
    

  • 属性选择器 - [attr^=val]

    • title属性值以单词one开头的元素

     [lang^="one"] {
         color: red;
    }
    

    
    文字内容1
    文字内容2
    文字内容3
    文字内容4
    文字内容5
    
    

  -属性选择器 - [attr$=val]

  • title属性值以单词one结尾的元素

     [title$="one"] {
            color: red;
        }
  

    
  文字内容1
  文字内容2
  文字内容3
  文字内容4
  文字内容5
  
  

  • 属性选择器 - [attr*=val]
    • title属性值包含单词one的元素

    [title*="one"] {
            color: red;
    }
    

    
    文字内容1
    文字内容2
    文字内容3
    文字内容4
    文字内容5
    文字内容6
    
    

  组合

  后代选择器(descendant combinator)

  • div元素里面的span元素(包括直接、间接子元素)

  div span {
      color: red;
  }
  

  
  文字内容1
  
      文字内容2
      
  
          文字内容3
      
  
  
      文字内容4
  
  文字内容5
  
  

  image.png

  子选择器(child combinators)

  • div元素里面的直接span子元素(不包括间接子元素)

  div>span {
      color: red;
  }
  

  
  文字内容1
  
      文字内容2
      
  
          文字内容3
      
  
  
      文字内容4
  
  文字内容5
  
  

  image.png

  相邻兄弟选择器

  • div元素后面紧挨着的p元素

  div+p {
      color: red;
  }
  

  
  
  文字内容1
  
      
  文字内容3
  
  文字内容3
  文字内容4
  
  

  image.png

  全体兄弟选择器

  • div元素后面的p元素(且div、p元素必须是兄弟关系)

  div~p {
      color: red;
  }
  

  
  文字内容1
  
      
  文字内容3
  
  文字内容3
  文字内容4
  
  

  image.png

  选择器组- 并集选择器

  • 所有的div元素+所有class值有one的元素+所有title属性值等于test元素

  div,.one,[title="test"] {
      color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  
  

  选择器组-交集选择器

  • 同时符合2个条件的元素：div元素、class的值有one

  div.one {
      color: red;
  }
  

  文字内容1
  文字内容2
  文字内容3
  

  image.png

  伪类

  • 常见的伪类有
  • 动态伪类(dynamic pseudo-classes)
    • :link、:visited、:hover、:active、:focus
  • 目标伪类(target pseudo-classes)
    • :target
  • 语言伪类(language pseudo-classes)
    • :lang()
  • 元素状态伪类(UI element states pseudo-classes)
    • :enabled、:disabled、:checked
  • 结构伪类(structural pseudo-classes)
    • :nth-child()、:nth-lase-child()、:nth-of-type、:nth-last-of-type()
    • :first-child、:last-child、:first-of-type、:last-of-type
    • :root、:only-child、:only-of-type、:empty
  • 否定伪类(negation pseudo-classes)
    • :not()

  动态伪类

  • 使用举例
    • a:link 未访问的链接
    • a:visited 已访问的链接
    • a:hover 鼠标挪动到链接上
    • a:active 激活链接(鼠标在链接上长按住未松开)
  • 使用注意
  • :hover必须放在:link和:visited后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所有建议编写顺序是:link、:visited、:hover、:active
  • 记忆：女朋友看到LV包包后.ha ha大笑
  • 除了a元素,:hover、:active也能用在其他元素上

  动态伪类-：focus

  • :focus指当前拥有输入焦点的元素(能接收键盘的输入)
    • 本文输入框一聚焦后，背景就会变红色

     input:focus {
       background-color: red;
     }
    

    • 因为链接a元素可以被键盘Tab键选中聚焦,所有:focus也适用于a元素

    input:focus {
      color: red;
    }
    a:focus {
        color: red;
    }
    

  • 动态伪类编写顺序建议为
    • :link、:visited、:focus、:hover、active
    • 记忆：女朋友看到LV包包后，Feng疯一样地ha ha大小
  • 去除a元素默认的:focus效果

  a:focus {
      outline: none;
  }
  

  • 或者将tabindex属性设置为-1

  tabindex属性

  • 使用tabindex可以控制tab键选中元素的顺序，从1开始
  • tabindex设置为-1,代表禁止使用tab键选中
  • 细节
    • 直接给a元素设置样式，相当于给a元素所有的动态伪类都设置了

    a {
       color: red;
    }
    

    • 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

  目标伪类(target pseudo-classes)

  • 当元素被锚点链接当作目标跳转之后起作用

  p:target {
      color: red;
  }
  

  image.png
  
  
  image.png

  语言伪类(language pseudo-classes)

  • 语言是en系列(英语)的所有div元素

  div:lang(en) {
      color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  文字内容4
  
  

  image.png

  元素状态伪类(UI element states pseudo-classes)

  • :enable启动状态
  • :disabled禁止状态
  • :checked被选中状态

  
  input:enabled {
      border: 2px solid red;
  }
  input:disabled {
      border: 2px solid black;
  }
  
  input:checked {
      outline: 2px solid blue;
  }
  

  结构伪类

  :nth-child(1)

  • 是父元素中的第一个子元素

    
    
    image.png

  :nth-child(2n)

  • n代表任意正整数和0
  • 是父元素中的第偶数个子元素
  • 跟:nth-child(even)同义

  :nth-child(2n+1)

  • 父元素中第奇数个子元素
  • 跟:nth-child(odd)同义

  :nth-child()的完整使用格式是:nth-child(an+b)

  • 是父元素中的第an+b个子元素
  • a 、b需要给出具体的值，可以是正整数、也可以是负整数，0
  • n代表任意正整数和0

  :nth-last-child()从最后一个子元素开始往前计数，

  • :nth-last-child(1)，代表倒数第一个子元素
  • :nth-last-child(-n + 2),代表最后两个子元素
  • 练习:表示第2个~倒数第2个元素(去除头和尾元素)

  p:nth-child(n + 2):nth-last-child(n+2) {
      color: red;
  }
  

  
  
      
  文字内容1
      
  文字内容2
      
  文字内容3
      
  文字内容4
      
  文字内容5
      
  文字内容6
  
  
  

  image.png

  :nth-of-type()、:nth-last-of-type()

  • :nth-of-type()用法跟:nth-child()类似，不同点是:nth-of-type()计数时只计算同种类元素，就是只计数兄弟类

  其他 :first-child、:last-child、:first-of-type、:last-of-type、:only-child、only-of-type、root:

  • first-child 等同于:nth-child(1)
  • :last-child 等同于:nth-last-child(1)
  • :first-of-type 等同于:nth-of-type(1)
  • :last-of-type 等同于:nth-last-of-type(1)
  • :ony-child 是父元素中唯一的子元素。
    • 等同于 :first-child:last-child或者:nth-child(1):nth-last-child(1)
  • :only-of-type 是父元素中唯一的这种元素的子类
    • 等同于:first-of-type:last-of-type或者:nth-of-type(1):nth-last-of-type(1)

  :empty

  • :empty代表里面完全空白元素

  p:empty {
      width: 200px;
      height: 20px;
      background: red;
  }
  

  
  
  文字内容1
   
  
  文字内容2
  
  

  image.png

  否定伪类(negation pseudo-class)

  • :not()的格式是:not(x)
    • x是一个简单的选择器
    • 可以是元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(出否定伪类)

  /*除了第一个同级子类p元素和最后一个同级子类p元素以外的所有p元素*/
  p:not(:first-of-type):not(:last-of-type) {
      color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  文字内容4
  文字内容5
  
  

  image.png
  • :not(x)表示除x以外的元素

  /*除了p元素、body元素、html元素以外的所有元素都为红色*/
  :not(p):not(body):not(html) {
      color: red;
  }
  

  
  文字内容1
  文字内容2
  文字内容3
  文字内容4
  
  

  image.png

  伪元素(pseudo-elements)

  • 常用的伪元素有
    • :first-line等价写法::first-line
    • :first-letter等价写法::first-letter
    • :before等价写法::before
    • :after等价写法::after
  • 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line

  ::first-line

  • 可以针对首行文本设置属性

  div::first-line {
      color: blue;
      text-decoration: underline;
  }
  

  image.png
  • 只有一下属性可以可以应用在::first-line伪元素
    • 字体属性、颜色属性、背景属性
    • word-spacing、letter-spacing、text-decoration、text-transform、line-height

  ::first-letter

  • ::first-letter可以针对首个字符设置属性

  div::first-letter {
      color: blue;
      text-decoration: underline;
      font-size: 30px;
  }
  

  image.png
  • 只有下列属性可以应用在::first-letter伪元素
    • 字体属性、margin属性、padding属性、border属性、颜色属性、背景属性
    • text-decoration、text-transform、letter-spacing、word-spacing、line-height、float、vertical-align(只有当float是none时)

  ::before和::after

  • 用来在一个元素的内容之前或者之后插入其他内容(可以是文字图片)

  div {
      color: red;
  }
  div::before {
      /*在div前面插入的内容"before"*/
      content: "before";
      font-size: 40px;
  
  }
  div::after {
      /*在div后面输入一张图片*/
      content: url("https://www.jd.com/favicon.ico");
  }
  

  
  这是京东icon
  
  

  image.png

  attr()

  • 在content中，还可以使用attr属性名来获取元素的属性值

  /*a[href^="http"]细节
  a[href]表示元素里面必须href元素
  href^="http" 表示href必须以http开头
  */
  a[href^="http"]::after {
      content: "[" attr(href) "]";
  }
  

  
  京东 
  
  百度
  
  淘宝
  
  小码哥
  
  

  image.png

  特性

  属性继承

  • CSS中有些属性是可以继承的，何为元素属性继承？
    • 一个元素如果没有设置某属性值，就会跟随父元素的值
    • 当然，一个元素如果有设置某属性的值，就使用自己设置的值
  • 比如color 、font-size等属性都可以继承的
  • 不能继承的属性，一般可以使用inherit值强制继承
  • CSS属性继承的是计算值，并不是当初编写属性时的指定的值(字面值)

  
  div1
      
  div2
          
  div3
      
  
  
  

  属性层叠

  • CSS允许多个相同名字的CSS属性层叠在同一个元素上
    • 层叠后的结果是：只有一个CSS属性会生效

  div1
  

  image.png

  使用经验

  • 为何有时候编写的CSS属性不好使，有可能是因为
    • 选择器的优先级太低
    • 选择器没选中对应的元素
    • CSS属性样式不对
      • 元素不支持此CSS属性，比如span默认是不支持width和height的
      • 浏览器不支持此CSS属性，比如旧版本的浏览器不支持CSS3的某些属性
      • 被同类型的CSS属性覆盖，比如font覆盖font-size
  • 建议
    • 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错

  元素类型

  块级、行内级元素

  • 根据元素的显示类型、HTML元素可以主要分为2大类
    • 块级元素
      • 独占一行
      • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、artcle、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
    • 行内级元素
      • 多个行内级元素可以在父元素的同一行中显示
      • 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、video、audio等

  替换、非替换元素

  • 根据元素的内容类型，HTML元素可以主要分为2大类
    • 替换元素
      • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
      • 比如img、input、video、embed、canvas、audio、object等
    • 非替换元素
      • 和替换元素相反，元素本身是有实际内容的，浏览会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底是什么内容
      • 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、div、nav、section、blockquote、hr、a、strong、span、code、label等

  元素的分类总结

  image.png

  display

  • CSS中有个display属性，能修改元素的显示类,有4个常用的值
  • block：让元素显示为块级元素
  • inline：让元素显示为行内级元素
  • none：隐藏元素
  • inline-block：让元素同时具备行内级、块级元素的特征
  • display的以下取值，等同于某些HMTL元素
    • table：，一个block-level表格
      inline-table：
      ，一个inline-level表格
      table-row：
      table-row-group：
      table-header-group：
      table-footer-group：
      table-cell：

      ，表格标题

      list-item：

      inline-block

      • 可以让元素同时具备块级、行内级元素的特征
        • 跟其他行内级元素在同一行显示
        • 可以随意设置宽高
        • 宽高默认有内容决定
      • 可以理解为
        • 对外来说，它是一个行内级元素
        • 对内来说，它是一个块级元素
      • 常见用途
        • 让行内级非替换元素(比如a、span等)能够随时设置宽高
        • 让块级元素(比如div、p等)能够跟其他元素在同一行显示

      visibility

      • visibility，能控制元素的可见性，有2个常用值
        • visible：显示元素
        • hidden：隐藏元素
      • visibility:hidden;和display:none;区别
        • visibility:hidden
          • 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
        • display:none
          • 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

      overflow

      • overflow用于控制内容溢出时的行为
        • visible：溢出的内容照样可见
        • hidden：溢出的内容直接裁剪
        • scoll：溢出的内容被裁剪，但可以通过滚动机制查看
          • 会一直显示滚动条区域，滚动条区域占用的空间属于width、height
        • auto：自动根绝内容是否溢出来决定是否提供滚动机制
        • 还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向(建议还是直接使用overflow，因为目前overflow-x，overflow-y还没有成为标准，浏览器不支持)

      元素之间的空格

      • 行内级元素：包括(inline-block元素)的代码之间如果有空格，会被解析显示为空格

      span1 span2
span3

      image.png

      • 目前建议解决的方法
        • 1.元素代码之间不要留空格
        • 2.注释掉空格

        span1span2
  

        • 3.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size
          • 此方法在safari不适用
        • 4.给元素加float

      注意点

      • 块级元素、line-block元素
        • 一般情况下，可以包含任何其他元素(比如块级元素、行内级元素、inline-block元素)
        • 特殊情况，p元素不能包含其他块级元素
      • 行内级元素
        • 一般情况下，只能包含行内级元素

      盒子模型

      盒子

      • HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性
        • 内容(content)
          • 盒子里面装的东西
        • 内边距(padding)
          • 怕盒子里面装的东西损坏而添加的泡沫或者其他抗震的辅料
        • 边框(border)
          • 就是盒子的边框，比如木盒子四周的目标
        • 外边距(margin)

          • 为了方便取出，盒子之间保留一定的空隙

            
            
            image.png

      • 默认的盒子模型如下图所示

        
        
        image.png

      • 浏览器开发者工具中看到的盒子模型

        
        
        image.png

      一个元素实际占用的宽度= border-left + padding-left + width + padding-right + border-right
一个元素实际占用的高度= border-top + padding-top + height + padding-bottom + border-bottom
一个元素的空间宽度= margin-left + border-left + padding-left + width + padding-right + border-right + margint-right
一个元素空间的高度= margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

      宽度、高度相关

      • width：宽度
        • min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
        • max-width：最大宽度,无论内容多少，宽度都小于或等于max-width
      • hegith：高度
        • min-height：最小高度，无论内容多少，高度都大于或等于min-height
        • max-height：最大高度，无论内容多少，高度都小于或等于max-height

      内边距相关

      • padding-left：左内边距
      • padding-right：右内边距
      • padding-top：上内边距
      • padding-bottom：下内边距
      • padding：是paddng-top、padding-right、padding-bottom、padding-left的简写属性。
        • 注意：这个简写属性是有顺序的按照顺时针旋转依次为：上、右、下、左。如果缺少left，那么left就是用rightd的值、如果缺少bottom，那么bottom就是用top的值

      外边距相关属性

      • margin-left：左外边距
      • margin-right：右外边距
      • margin-top：上外边距
      • margin-bottom：下外边距
      • margin：是margin-top、margin-right、margin-bottom、margin-left的简写水属性。和padding的规律一样。都是顺时针旋转。

      上下margin传递

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

        
      
  aa
  
  

      • margin-bottom传递
      • 如果块级元素的底部线和块级父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom的值会传递给父元素

          
aa

aa

      • 水平方向的margin是永远不会发生传递现象
      • 如何防止传递问题？
        • 给父元素设置padding-top\padding-bottom
        • 给父元素设置border
        • 给父元素或者子元素设置display:inline-block
      • 建议
        • margin一般使用设置兄弟元素之间的间距
        • padding一般用来设置父子元素之间的间距

      上下margin折叠

      • 垂直方向上相邻的2个margin(margin-top、margin-bttom)有可能合并为一个margin，这种现象叫做collaps(折叠)
      • 水平方向上的margin(margin-left、margin-right)永远不会collapse
      • 折叠后的最终值的计算规则
        • 如果都是正数，最终值是：绝对值最大的那个正数值
        • 如果都是负数，最终值是：绝对值最大的那个负数值
        • 如果正数、负数都有，最终值是：最大的正数和最小的负数相加
      • 如何防止margin collapse
        • 只设置其中一个元素的margin
        • 条件允许的话，使用padding取代margin

      • 两个兄弟块级元素之间上下margin折叠

        
        
        image.png

      • 父子块级元素之间的margin折叠

        
        
        image.png

      • 无内容块级元素的margin的折叠

        
        
        image.png

      • 无内容块级元素的margin的折叠(折叠可以是连续的)

        
        
        image.png
      • 块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处

        • 比如连续段落之间的margin，恰好需要这种折叠效果

          
          
          image.png

      边框(border)相关属性

      • 边框宽度
        • border-top-width、border-right-width、border-bottom-width、border-left-width
        • border-width是上面4个属性的简写属性
      • 边框颜色
        • border-top-color、border-right-color、border-bottom-color、border-left-color
        • border-color是上面4个属性的简写属性
      • 边框样式
      • border-top-style、border-right-style、border-bottom-style、border-left-style
      • border-style是上面4个属性的简写属性

      边框样式的取值

      • none:没有边框，边框颜色，边框的宽度会被忽略
      • hidden：与"none"类似，多用在表格上，用于解决边框冲突
      • dotted：边框是一些列的点
      • dashed：边框是一条虚线
      • solid：边框是一条实线
      • double：边框有两条实线。两条线宽度和其中的空白的宽度之和等于border-width的值
      • groove：边框看上去好像是雕刻在画布中吐出来的
      • inset：该边框使整个框看上去好像是嵌在画布中

      • outset：和inset相反，该边框使整个框看上去好像是凸出来

        
        
        image.png

      边框相关的属性

      • border-top、border-right、border-bottom、border-left

                  border-top: 2px #0f0 dotted;
            border-right: 2px solid #f00;
            border-bottom: 2px dashed #0ff;
            border-left: 2px solid #ff0;

      image.png

      • 边框颜色、宽度、样式的编写顺序任意
      • border：统一设置4个方向的边框

      border: 2px solid #f00;

      边框的形状

      • 边框的形状可能是

        • 矩形、梯形、三角形等形状

          
          
          image.png

      边框妙用- 实现三角形

      image.png

      • transparent 透明
      • transform：旋转

      边框妙用-实现双色平分

              div {
            background: #DDD;
            width: 100px;
            height: 50px;
            border-bottom: 50px solid #111;
        }

      image.png

      行内级费替换元素的注意点

      • 以下属性对行内级非替换元素不起作用
        • width、height、margin-top、margin-bottom
      • 以下属性对行内级非替换元素效果比较特殊
        • padding-top、padding-bottom、border-top、border-bottom

      border---radius

      • 圆角半径相关的属性有
        virder-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius
        border-top-left-radius: 40px 20px;
      • border---radius定义的是四分之一椭圆的半径
        • 第一个是水平半径
        • 第二个是垂直半径(如果不设置，就跟随水平半径的值)
      • border-top-left-radius: 50%
      • 还可以设置百分比
        • 参考的是border-box的宽度和高度(也就是元素的实际占用尺寸，border+padding+width\height)

      • border-top-left-radius:55px 25px

        
        
        image.png

      border-radius

      • border-radius是一个缩写属性
        bordeer-radius:10px 20px 30px 40px/15px 25px 35px 45px
      • 斜线/前面是水平半径，后面是垂直半径
      • 4个值的顺序是top-left、top-right、bottom-right、bottom-left(顺时针方向)
        • 如果bottom-left没设置，就跟随top-right
        • 如果bottom-right没设置，就跟随top-left
        • 如果top-right没设置，就跟随top-left
      • border-radius大于或等于50%时，就会变成一个圆

              div {
            width: 90px;
            height: 90px;
            border: 30px solid #000;
            background-color: #f00;
            border-radius: 50%;
        }

      image.png

      outline

      • outline表示元素的外轮廓
        • 不占用空间
        • 默认显示在border的外面
        • 每个部位都是完整连接的，不会像border那样有可能断开(比如行内级非替换元素的换行)
      • outline相关属性有
        • outline-width
        • outline-style：取值跟border的样式一样，比如solid、dotted等
        • outline-color
        • outline:outline-width、outline-style、outline-color的简写属性，跟border用法类似
        • outline-offset：设置outline和border之间的间距
      • 应用实例
        • 去除a元素、input元素的focus轮廓效果

      box-shadow

      • box-shadow属性可以设置一个或多个阴影
        • 每个阴影用表示
        • 多个阴影之间用逗号隔开，从前到后叠加
        • 的常见格式如下
          • = inset? && {2,4} &&?
          • 第一个：水平方向的偏移，正数往右偏移
          • 第二个：垂直方向的偏移，正数往下偏移
          • 第三个：模糊半径
          • 第四个：延伸距离
          • ：阴影的颜色，如果没有设置，就跟随color属性的颜色
          • inset：外框阴影变成内框阴影

      box-shadow示例1

                  width: 100px; height: 100px;
            border: 12px solid blue; background-color: orange;
            border-top-left-radius: 60px 90px;
            border-bottom-right-radius: 60px 90px;
            box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4) inset,
            12px 12px 0px 8px rgba(0,0,0,0.4) ;

      image.png

      box-shadow示例2

      image.png

      text-shadow

      • text-show用于类似于box-shadow，用于给文字添加阴影效果
      • text-show同样适用于::first-line、::first-letter

      box-sizing

      • box-sizing用来设置盒子模型中的宽高行为
      • content-box
        • padding、borde都布置在width、height外边
      • border-box
      • padding、border布置在width、height里边

      content-box

      image.png

      • 元素的实际宽度 = border + padding + width
      • 元素的实际高度 = border + padding + height

      border-box

      image.png

      • 元素的实际占用宽度= width
      • 元素的实际占用高度 = height

      盒子模型

      image.png

      元素的水平居中显示

      • 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
      • 行内级元素、inline-block元素
        • 水平居中：在父元素中设置text-align:center
      • 块级元素
      • 水平居中：给自己设置margin-left:auto、margin-right:auto

      背景

      background-image

      • background-image用于设置元素的背景图片
        • 会盖在background-color的上面
        • 在图片的透明区域，可以看到背景色
      • 如果设置了多张图片
        background-image: url("bg001.png"),url("bg002.png"),url("bg003.png");
        • 设置的第一张图片将会在最上面，其他图片按顺序层叠在下面
      • 注意：如果设置了背景图后，元素没有具体的宽高，背景图片是不会显示出来的

      background-repeat

      • background-repeat用于设置背景图片是否需要平铺
      • 常见的设置右
        • repeat：平铺
        • no-repeat：不平铺
        • repeat-x：只有在水平放心上平铺
        • repeat-y：只有在垂直方向上平铺

      background-size

      • background-size用于设置大小

                  /*宽度150，高度180*/
            background-size: 150px 180px;
            /* 宽度保持原来的宽高比自动计算。高度180*/
            background-size: auto 180px;
            /* 宽度150，高度保持原来的宽高比自动计算*/
            background-size: 150px auto;
            background-size: 150px;

      background-position

      • 用于设置背景图片水平、垂直方向上的具体位置

        
        
        image.png
      • 水平方向上还可以设置：left、center、right
      • 垂直方向上还可以设置：top、center、bottom
      • 如果只设置了1个方向，另一个方向默认是center
      • 比如background-position:80px;等价于background-position:80px center;

      Sprite

      • 什么是CSS Sprint
        • 是一种CSS图像合成技术，将各种小图片合并到一张图上，然后利用CSS的背景定位来显示对应的图片部分
        • 有人翻译为：CSS雪碧、CSS精灵
      • 使用CSS Sprint的好处
        • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
        • 减小图片总大小
        • 解决了图片命名的困扰，只需要针对一张集合的图片命名
        • 更换风格方便简单，只需要在少数张图片上修改图片的颜色和样式，整个网页的风格就可以改变
      • Sprite图片制作
        • 方法1：Photoshop
        • 方法2：https://www.toptal.com/developers/css/sprite-generator

      background-attachment

      • 可以设置以下3个值
        • scroll：背景图片跟随元素一起滚动(默认值)
        • local：背景图片跟随元素以及元素内容一起滚动
        • fixed：背景图片相当于浏览器窗口固定

      background

      • 是一系列背景相关属性的简称，常用格式是
        • image position/size repeat attachment color
        • background-size可以省略不写，如果不省略，/background-size必须紧跟在background-position的后面
        • 其他属性也都可以省略。而且顺序任意
          background: url("image/beer.png" ) center center/150px 250px no-repeat #f00;
      • Sprite编写建议

              /*先将所有的image加载出来*/
        .div1,.div2,.div3 {
            background: url("images/mhxy.jpg");
        }
        /*在分别设置对应点的位置*/
        .div1 {
            background-position: -10px -30px;
        }
        .div2 {
            background-position: -60px -50px;
        }
        .div3 {
            background-position: -110px -75px;
        }

      background-image和img的选择

      • 利用background-image和img都能够实现显示图片的需求，在开发中如何选择？

        
        
        image.png

      • 总结

        • img，作为网页内容的重要组成部分，比如广告图、LOGO图片、文章配图、产品图片
        • background-image，可有可无。有，能让网页更美观。无，也不影响用户获取完整网页内容信息
        • 宗旨
          • 在没有任何CSS样式的情况下，用户也能浏览到网页中完整的内容信息。(PS：网络出现问题或服务器出现问题是，有可能会导致CSS文件加载失败)

      文档画布背景

      • 没有HTML元素对应着文档画布，如何设置文档画布的背景
        • html或者body元素的背景都能够延伸到整个文档画布
        • 如果同时设置了html和body元素的背景，根元素html的背景才会作为文档的画布背景
        • 建议通过body元素来设置文档画布背景

      伪元素::first-line的背景

      • ::first-line虽然意为第一行内容，但它的背景并不一定填满一行，取决于各种因素
      • 文字大小、容器宽度、文字对齐方式

              div::first-line {
            background-color: blue;
        }

      image.png

      background实现图片链接

      • 使用background也可以实现图片链接

              a {
            background: url("bg001.png") no-repeat;
            width: 70px;
            height: 70px;
            display: inline-block;
        }

      cursor

      • cursor属性有auto、default、pointer、text、none

        
        
        image.png
      • cursor除了可以设置系统自带的一些值以外，还可以设置图片
        cursor: url("text/russel.png" 0 0,pointer);
        • url()后面的2个数字
          • 分别代表图片在水平、垂直方向上的偏移，不能设置负数
          • 0和0代表图片左上角和指针是重叠的，数值变大，图片左上角会朝着左上角方向偏移
          • 如果水平、垂直分别设置图片宽度的一半，图片的中心点将和指针重叠
      • 如果图片找不到，就会使用pointer作为cursor的值

      定位

      标准流

      • 默认情况下，元素都是按照normal flow(标准流、常规流、正常流、文档流(document flow))进行定位
        • 从上到下、从左到右顺序摆放好

        • 默认情况下，互相之间不存在层叠现象

          
          
          image.png

      margin、padding定位

      • 在标准流中，可以使用margin、padding对元素进行定位
        • 其中margin还可以设置负数
      • 比较明显的缺点是
        • 设置一个元素的margin或者padding，通常会影响到标准流中的其他元素
        • 不便于实现元素的层叠效果

      position

      • 利用position可以对元素进行定位，常用取值有4个
        • static：静态定位
        • relative：相对定位
        • absolute：绝对定位
        • fixed：固定定位

      relative 相对定位

      • 元素按照normal flow布局、
      • 可以通过left、right、top、bottom进行定位
        • 定位参照对象是元素自己原来的位置
      • left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示

      你可能感兴趣的:(CSS笔记)

      • CSS笔记（九） 盒子模型---------清除浮动 Favour72 csscss3web前端大前端
        前言我们前面学到的浮动元素有一个标准流的父元素，他们有一个共同点特点，都是有高度的但是，所有的父盒子都必须给高度吗最好的选择是不是让子盒子撑开父盒子，有多少子盒子就能撑开父盒子但是呢，由于在网页中父盒子在很多情况下没有给高度，子盒子float浮动了又不占有位置，那么没有盒子撑开父盒子了，父盒子的高度就会为0,也就是我们说过的父元素坍塌一、清除浮动是什么？清除浮动的本质就是清除浮动元素脱离标准流造成
      • CSS笔记 陈两全 css笔记前端
        8.201.层级具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。注意：如果两个定位元素重叠，没有指定z-index，最后定位在HTML代码中的元素将被显示在最前面。有三个特征：1.元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素2.z-index属性指定了⼀个元素的堆叠顺序（哪个元素应该放在前面，或后面）3.⼀个元素可以有正数或负数的堆叠顺序2.透明度透明度有两种表示方法，分别是：1
      • CSS笔记 陈两全 css笔记前端
        8.131.列表样式列表样式是指写在li标签上面的样式控制，他有三个属性和一个综合属性，分别是1.list-style-type2.list-style-position3.list-style-image4.list-style（综合属性）1.1.list-style-typelist-style-type有五个属性值，分别是1.默认值:disc（实心圆）2.circle（空心圆）3.squar
      • CSS笔记(二) - 页面布局 盒子模型 且.为.乐 #CSScsshtmlcss3
        文章目录1元素显示模式1.1块元素1.2行内元素1.3行内块元素1.4转换1.5总结2.盒子模型2.1页面布局2.2盒子模型（BoxModel）组成2.3边框2.3.1概念2.3.2表格的细线边框2.3.3边框对盒子模型的影响2.4内边距padding2.4.1概念2.4.2内边距和盒子大小的关系2.4外边距margin2.4.1外边距典型应用-块级元素水平居中2.5外边距合并2.5.1嵌套块元素
      • CSS必看知识整理 24e2785df9d3
        学前端的一点css笔记，参考的是黑马程序员pink老师的教程。一.行内元素1.一行可以显示多个2.宽度核高度默认由内容撑开3.不可以设置宽高代表标签：a、span、b、ui、s、strong、ins、em、del二、行内块元素1.一行可以显示多个2.可以设置宽高代表标签：input、textarea（文本框）、button、select三、元素显示模式转换display:block转换成块级元素d
      • 【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景（Day 2） 进击的文文文 webcss前端css3
        来源：黑马程序员pink老师前端入门教程目录I.Emmet语法①快速生成HTML结构语法②快速生成CSS样式语法③快速格式化代码II.复合选择器①后代选择器※②子选择器※③并集选择器※④伪类选择器❀链接❀focus⑤总结III.元素显示模式①块元素②行内元素③行内块元素④总结⑤显示模式的转换⑥snipaste的使用⑦单行文字垂直居中IV.背景总结①背景颜色bgc❀半透明②背景图片bgi③背景平铺b
      • 前端html+css笔记 stoAir 前端htmlcss
        前端Html:html标签加粗--文本格式化标签倾斜下划线删除src用于指定图像的位置名称(属性名+属性值=属性)alt替换文本title提示文本width图片宽度链接（段落内空格+target="_blank"跳转新窗口音频loop循环播放autoplay自动播放（禁用controls显示音频面板视频muted静音播放同（7）9.列表无序列表：有序列表：定义列表：（一个标题对应多个内容10.表格
      • 初学css笔记 描绘已经在学了 css
        部分笔记！！持续更新css时写在style标签里，style标签在head标签里，title标签下。基本结构：选择器（标签名字）{css的属性}html是卸载body里面的--------------------------------------------------------------------------------------------------------scc常见属性col
      • CSS笔记IV saddhu. css笔记前端css3
        定位作用：灵活的改变盒子在网页中的位置相对定位定位模式：position：relativeleft、right、top、bottom特点：改变位置的参照物是自己原来的位置不脱标，而且占位标签显示模式表改变绝对定位定位模式：position：absolute使用场景：(子绝父相)子级绝对定位，父级相对定位为子级设置绝对定位，为父级设置相对定位特点：脱标，不占位与相对定位恰恰相反参照物是先找最近已经定
      • CSS笔记III saddhu. web前端css前端css3html5web
        选择器结构伪类选择器作用：根据元素的结构关系查找元素选择器说明E:first-child查找第一个E元素E:last-child查找最后一个E元素E:nth-child(N)查找第N个E元素(第一个元素N值为1)nth-child(公式)作用是可以根据元素的结构关系查找多个元素偶数标签：2n；奇数2n+1or2n-1之类的依次类推找到第五个以后的所有标签n+5；第五个以前的所有标签是-n+5伪元素
      • CSS笔记II saddhu. web前端css笔记前端css3web
        CSS第二天笔记复合选择器后代选择器子选择器并集选择器交集选择器伪类选择器三大特性继承性层叠性优先级优先级-叠加计算规则Emmet写法背景属性背景图平铺方式位置缩放固定复合属性显示模式转换显示模式复合选择器定义：由两个或多个基础选择器，通过不同的方式组合而成作用：更准确更加高效的选择目标元素(标签)后代选择器说明:选择某元素的后代元素抽象理解：儿子孙子都要选择格式父选择器、子选择器{CSS属性}，
      • CSS笔记 saddhu. web前端css笔记前端html5web3
        css第一天笔记CSS引入方式选择器标签选择器类选择器id选择器通配符选择器盒子属性文字控制属性大小粗细倾斜行高字体族字体复合属性文本缩进文本对齐修饰线颜色调试工具CSS引入方式有三种内部样式、外部样式、行内样式内部样式表：css样式写在style标签中(选中p标签)p{color:blue}外部样式表：作为开发使用1.写在单独的css文件中(my.css)例如将p标签变成红色p{color:re
      • 【狂神css笔记】CSS介绍&&选择器 暮色_年华 JavaScriptcsscss3前端
        css是什么CascadingStyleSheet：层叠级样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动......css优势：1、内容和表现分离2、网页结构表现统一，可以实现复用3、样式十分丰富4、建议使用独立于html的css文件5、利用SEO，容易被搜索引擎收录CSS快速入门选择器{声明1;声明2;}每一个语句以分号结尾css与html分离：在htm
      • html&css Jones_aj 前端
        HTML&CSS笔记总结标签语义化网页最大标题只能写一个提高网页的排名写在log下面h2-h6内容标题可以随便多写从大到小的写容器可以装任何东西包裹一段文字包裹重要文字引入图片属性src图片地址alt图片描述图片未引用成功时显示在页面ali中描述内容title当鼠标移到到标签时显示内容在哪里引入图片就在哪里开始找相对路径./同级文件/打开文件夹…/打开上一级对话列表dldt标题dd内容列表无序列表
      • html&css笔记完整版 NoN小旻 前端html&css自学htmlcss
        把1,2合在一起了，方便查看教程指路：这里目录1.导入京东界面练习（p102-114）设置网站图标（用在标题栏和收藏栏）2.vscode使用3.html实体meta标签：语义化标签块元素和行内元素列表超链接路径：图片标签内联框架音视频表格table表单formCSS设置样式：语法：选择器：单个选择器：复合选择器：父子兄弟选择器：属性选择器伪类选择器：否定伪类：超链接伪类：伪元素选择器：权重继承单位
      • 04.尚硅谷css笔记 xjt_0901 前端css
        css学习资料尚硅谷css3：https://www.bilibili.com/video/BV1XJ411X7UdMDN:https://developer.mozilla.org/zh-CN/CSS3参考手册：http://caibaojian.com/选择器游戏：http://flukeout.github.io/#HTML转义字符在HTML中有些时候，我们不能直接书写一些特殊符号比如：多个
      • "" target="_blank">学习css笔记——儿子选择器">" 巨汉子
        这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间，一个说自已是从海南万宁来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”，我问：“你们都想学啥？”，女粉丝
      • 2019-12-05 旧城丶恒书
        Version:1.0StartHTML:000000193EndHTML:000448737StartFragment:000425527EndFragment:000448639StartSelection:000425527EndSelection:000448639SourceURL:https://www.jianshu.com/writer·Css笔记Css的作用：[if!suppor
      • CSS笔记 且.为.乐 #CSScss学习css3
        文章目录1.图片1.1body下放图片2.文字2.1文字格式2.2Fonts字体属性2.2.1字体系列-fontfamily2.2.2字体大小-fontsize2.2.3字体粗细-font-weight2.2.4字体风格-font-style2.2.5字体复合属性3.盒子某些属性3.1圆角边框3.2盒子阴影3.3文字阴影4.table表单1.图片1.1body下放图片body下放图片body{ba
      • 学习CSS笔记——清除浮动clear 巨汉子
        这个故事发生在某天，到华南植物园周边喝完早茶回公司，上网收集有趣的文字，整理修订多年前写好的《JavaScript》教程，并创作汉语SEO要用的《CSS语言》教程，存起来以后当文化传播作品使用。一边整理《JavaScript》教程,一边在网上和女粉丝侃大山，突然间，一个说自已是从辽宁铁岭来广州学现代汉语的女粉丝问：“陈老师，最近文化传播教程又打算教点什么新东西？”，我问：“你们都想学啥？”，女粉丝
      • Web之HTML笔记 qq742234984 前端htmlpythonxml开发语言
        Web之HTML、CSS、JSWeb标准一、HTML（超文本标记语言）HTML基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单Web之CSS笔记Web标准结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版式、颜色、大小等外观属性(CSS)行为标准用于对网页模型的定义及交互的编写(JavaScript)一、H
      • Web之CSS笔记 qq742234984 前端css笔记
        Web之HTML、CSS、JS二、CSS（CascadingStyleSheets层叠样式表）CSS与HTML的结合方式CSS选择器CSS基本属性CSS伪类DIVCSS轮廓CSS边框盒子模型CSS定位Web之HTML笔记二、CSS（CascadingStyleSheets层叠样式表）Css是种格式化网页的标准方式，用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的
      • css笔记 花与37 CSScsshtmlhtml5
        1、文字超出部分显示省略号单行文本的溢出显示省略号（一定要有宽度）p{width:200rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}多行文本溢出显示省略号p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hi
      • CSS笔记 洛千陨 前端学习笔记css笔记前端
        前端学习笔记专栏区别于官网中全面的知识讲解，主要记录学习技术栈时对于重点内容的提炼，便于对技术栈知识的快速回顾以及使用1.各类主要选择器常规选择器p：元素选择器.class：类选择器#id：id选择器input[type="text"]：属性选择器divp：后代选择器常用选择器父级是div元素的p元素：div>pdiv元素之后的第一个p元素（兄弟元素）：div+pp元素之后的每一个ul元素：p~u
      • Html Css笔记 weixin_30885111 人工智能javascriptViewUI
        鼠标交点:outline：none；透明:opacity透明0-1的小数元素透明它里边所有的内容都会变成透明的黑客:在结尾加如：\0IE11至IE8的IE浏览器\9\0IE10至IE8的IE浏览器\9IE10及IE10之前的IE浏览器在开头加入：*,+IE7及IE7之前的IE浏览器支持_IE6及IE6之前的IE浏览器支持注释！！！！！！！！！！！！！！！！！！！这是IE9876其他IE条件判断语句
      • CSS读书笔记 湾区人工智能 tensorflow人工智能python
        CSS笔记深圳，2023.10.26，Jack，常识：CSS(CascadingStyleSheets，层叠样式表），是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，CSS文件扩展名为.css。样式通常保存在外部的.css文件中。我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。CSS注释以/*开始,以*/结束/*这是个注释*/CSS
      • CSS笔记[狂神版] 究极暴龙兽(Java版) css前端css3
        1、CSS如何学习1.css是什么2.css怎么用（快速入门）3.css选择器（重点+难点）4.美化网页（文字，阴影，超链接，列表，渐变）5.盒子模型6.浮动7.定位8.网页动画（特效效果）1.1、什么是CSSCascadingStyleSheet层叠级联样式表CSS：表现（美化网页）1.2、发展史css1.0css2.0DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得很简单，SEO
      • 狂神说-CSS笔记 幕雨123 前端javacss3
        文章目录1.什么是css1.1、什么是css1.2、发展史1.3、快速入门1.4、css的三种导入方式2、选择器2.1、基本选择器2.2、层次选择器2.3、结构伪类选择器2.4、属性选择器（常用）3、美化网页元素3.1、为什么要美化网页3.2、字体样式3.3、文本样式3.4、阴影3.5、超链接伪类3.6、列表3.7、背景3.8、渐变4、盒子模型4.1、什么是盒子模型4.2、边框4.3、外边距4.4
      • 狂神CSS笔记 YANKUOP #Java学习css前端css3
        文章目录1、什么是CSS1.1、什么是CSS1.2、发展史1.3、快速入门1.4、CSS的3种导入方式2、选择器2.1、基本选择器2.2、层次选择器2.3、结构伪类选择器2.4、属性选择器（常用）3、美化网页元素3.1、为什么要美化网页3.2、字体样式3.3、文本样式3.4、阴影3.5、超链接伪类3.6、列表3.7、背景3.8、渐变4、盒子模型4.1、什么是盒子模型4.2、边框4.3、内外边距4.
      • CSS笔记-狂神 阿汤哥的程序之路 前端css
        1、什么是CSS如何学习CSS是什么CSS怎么用（快速入门）CSS选择器（重点+难点）美化网页（文字，阴影，超链接，列表，渐变…）盒子模型浮动定位网页动画（特效效果）1.1、什么是CSSCascadingStyleSheet层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动1.2、发展史CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分
      • Enum 枚举 120153216 enum枚举
        原文地址：http://www.cnblogs.com/Kavlez/p/4268601.html Enumeration 于Java 1.5增加的enum type...enum type是由一组固定的常量组成的类型，比如四个季节、扑克花色。在出现enum type之前，通常用一组int常量表示枚举类型。比如这样： public static final int APPLE_FUJI = 0
      • Java8简明教程 bijian1013 javajdk1.8
                Java 8已于2014年3月18日正式发布了，新版本带来了诸多改进，包括Lambda表达式、Streams、日期时间API等等。本文就带你领略Java 8的全新特性。  一.允许在接口中有默认方法实现         Java 8 允许我们使用default关键字，为接口声明添
      • Oracle表维护 快速备份删除数据 cuisuqiang oracle索引快速备份删除
        我知道oracle表分区，不过那是数据库设计阶段的事情，目前是远水解不了近渴。 当前的数据库表，要求保留一个月数据，且表存在大量录入更新，不存在程序删除。 为了解决频繁查询和更新的瓶颈，我在oracle内根据需要创建了索引。但是随着数据量的增加，一个半月数据就要超千万，此时就算有索引，对高并发的查询和更新来说，让然有所拖累。 为了解决这个问题，我一般一个月会进行一次数据库维护，主要工作就是备
      • java多态内存分析 麦田的设计者 java内存分析多态原理接口和抽象类
              “  时针如果可以回头，熟悉那张脸，重温嬉戏这乐园，墙壁的松脱涂鸦已经褪色才明白存在的价值归于记忆。街角小店尚存在吗？这大时代会不会牵挂，过去现在花开怎么会等待。       但有种意外不管痛不痛都有伤害，光阴远远离开，那笑声徘徊与脑海。但这一秒可笑不再可爱，当天心
      • Xshell实现Windows上传文件到Linux主机 被触发 windows
        经常有这样的需求，我们在Windows下载的软件包，如何上传到远程Linux主机上？还有如何从Linux主机下载软件包到Windows下；之前我的做法现在看来好笨好繁琐，不过也达到了目的，笨人有本方法嘛； 我是怎么操作的： 1、打开一台本地Linux虚拟机，使用mount 挂载Windows的共享文件夹到Linux上，然后拷贝数据到Linux虚拟机里面；（经常第一步都不顺利，无法挂载Windo
      • 类的加载ClassLoader 肆无忌惮_ ClassLoader
        类加载器ClassLoader是用来将java的类加载到虚拟机中，类加载器负责读取class字节文件到内存中，并将它转为Class的对象（类对象），通过此实例的 newInstance()方法就可以创建出该类的一个对象。   其中重要的方法为findClass(String name)。   如何写一个自己的类加载器呢？ 首先写一个便于测试的类Student
      • html5写的玫瑰花 知了ing html5
        <html> <head> <title>I Love You!</title> <meta charset="utf-8" /> </head> <body> <canvas id="c"></canvas>
      • google的ConcurrentLinkedHashmap源代码解析 矮蛋蛋 LRU
        原文地址： http://janeky.iteye.com/blog/1534352 简述 ConcurrentLinkedHashMap 是google团队提供的一个容器。它有什么用呢？其实它本身是对 ConcurrentHashMap的封装，可以用来实现一个基于LRU策略的缓存。详细介绍可以参见 http://code.google.com/p/concurrentlinke
      • webservice获取访问服务的ip地址 alleni123 webservice
        1. 首先注入javax.xml.ws.WebServiceContext, @Resource private WebServiceContext context; 2. 在方法中获取交换请求的对象。 javax.xml.ws.handler.MessageContext mc=context.getMessageContext(); com.sun.net.http
      • 菜鸟的java基础提升之道——————>是否值得拥有 百合不是茶
        1，c++，java是面向对象编程的语言，将万事万物都看成是对象；java做一件事情关注的是人物，java是c++继承过来的，java没有直接更改地址的权限但是可以通过引用来传值操作地址，java也没有c++中繁琐的操作，java以其优越的可移植型，平台的安全型，高效性赢得了广泛的认同，全世界越来越多的人去学习java，我也是其中的一员      java组成：
      • 通过修改Linux服务自动启动指定应用程序 bijian1013 linux
        Linux中修改系统服务的命令是chkconfig (check config)，命令的详细解释如下: chkconfig 功能说明：检查，设置系统的各种服务。 语　　法：chkconfig [ -- add][ -- del][ -- list][系统服务] 或 chkconfig [ -- level  <</SPAN>
      • spring拦截器的一个简单实例 bijian1013 javaspring拦截器Interceptor
        Purview接口 package aop; public interface Purview { void checkLogin(); } Purview接口的实现类PurviesImpl.java package aop; public class PurviewImpl implements Purview { public void check
      • [Velocity二]自定义Velocity指令 bit1129 velocity
        什么是Velocity指令 在Velocity中，#set,#if, #foreach, #elseif, #parse等，以#开头的称之为指令，Velocity内置的这些指令可以用来做赋值，条件判断，循环控制等脚本语言必备的逻辑控制等语句，Velocity的指令是可扩展的，即用户可以根据实际的需要自定义Velocity指令   自定义指令(Directive)的一般步骤 &nbs
      • 【Hive十】Programming Hive学习笔记 bit1129 programming
        第二章 Getting Started 1.Hive最大的局限性是什么？一是不支持行级别的增删改(insert, delete, update)二是查询性能非常差(基于Hadoop MapReduce）,不适合延迟小的交互式任务三是不支持事务2. Hive MetaStore是干什么的？Hive persists table schemas and other system metadata.
      • nginx有选择性进行限制 ronin47 nginx 动静　限制
        http { limit_conn_zone $binary_remote_addr zone=addr:10m; limit_req_zone $binary_remote_addr zone=one:10m rate=5r/s;... server {... location ~.*\.(gif|png|css|js|icon)$ {
      • java-4.-在二元树中找出和为某一值的所有路径 . bylijinnan java
        /* * 0.use a TwoWayLinkedList to store the path.when the node can't be path,you should/can delete it. * 1.curSum==exceptedSum:if the lastNode is TreeNode,printPath();delete the node otherwise
      • Netty学习笔记 bylijinnan javanetty
        本文是阅读以下两篇文章时： http://seeallhearall.blogspot.com/2012/05/netty-tutorial-part-1-introduction-to.html http://seeallhearall.blogspot.com/2012/06/netty-tutorial-part-15-on-channel.html 我的一些笔记 ===
      • js获取项目路径 cngolon js
        //js获取项目根路径，如： http://localhost:8083/uimcardprj function getRootPath(){     //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp     var curWwwPath=window.document.locati
      • oracle 的性能优化 cuishikuan oracleSQL Server
           在网上搜索了一些Oracle性能优化的文章，为了更加深层次的巩固[边写边记]，也为了可以随时查看，所以发表这篇文章。     1.ORACLE采用自下而上的顺序解析WHERE子句，根据这个原理，表之间的连接必须写在其他WHERE条件之前，那些可以过滤掉最大数量记录的条件必须写在WHERE子句的末尾。（这点本人曾经做过实例验证过，的确如此哦！
      • Shell变量和数组使用详解 daizj linuxshell变量数组
        Shell 变量 定义变量时，变量名不加美元符号（$，PHP语言中变量需要），如： your_name="w3cschool.cc" 注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。同时，变量名的命名须遵循如下规则： 首个字符必须为字母（a-z，A-Z）。 中间不能有空格，可以使用下划线（_）。 不能使用标点符号。 不能使用ba
      • 编程中的一些概念，KISS、DRY、MVC、OOP、REST dcj3sjt126com REST
        KISS、DRY、MVC、OOP、REST （1）KISS是指Keep It Simple,Stupid（摘自wikipedia），指设计时要坚持简约原则，避免不必要的复杂化。 （2）DRY是指Don't Repeat Yourself（摘自wikipedia），特指在程序设计以及计算中避免重复代码，因为这样会降低灵活性、简洁性，并且可能导致代码之间的矛盾。 （3）OOP 即Object-Orie
      • [Android]设置Activity为全屏显示的两种方法 dcj3sjt126com Activity
        1. 方法1：AndroidManifest.xml 里，Activity的 android:theme  指定为" @android:style/Theme.NoTitleBar.Fullscreen" 示例:   <application      
      • solrcloud 部署方式比较 eksliang solrCloud
        solrcloud 的部署其实有两种方式可选，那么我们在实践开发中应该怎样选择呢？ 第一种：当启动solr服务器时，内嵌的启动一个Zookeeper服务器，然后将这些内嵌的Zookeeper服务器组成一个集群。  第二种：将Zookeeper服务器独立的配置一个集群，然后将solr交给Zookeeper进行管理   谈谈第一种：每启动一个solr服务器就内嵌的启动一个Zoo
      • Java synchronized关键字详解 gqdy365 synchronized
        转载自：http://www.cnblogs.com/mengdd/archive/2013/02/16/2913806.html 多线程的同步机制对资源进行加锁，使得在同一个时间，只有一个线程可以进行操作，同步用以解决多个线程同时访问时可能出现的问题。 同步机制可以使用synchronized关键字实现。 当synchronized关键字修饰一个方法的时候，该方法叫做同步方法。 当s
      • js实现登录时记住用户名 hw1287789687 记住我记住密码cookie记住用户名记住账号
        在页面中如何获取cookie值呢? 如果是JSP的话,可以通过servlet的对象request 获取cookie,可以 参考:http://hw1287789687.iteye.com/blog/2050040 如果要求登录页面是html呢?html页面中如何获取cookie呢? 直接上代码了 页面:loginInput.html 代码: <!DOCTYPE html PUB
      • 开发者必备的 Chrome 扩展 justjavac chrome
        Firebug：不用多介绍了吧https://chrome.google.com/webstore/detail/bmagokdooijbeehmkpknfglimnifench ChromeSnifferPlus：Chrome 探测器，可以探测正在使用的开源软件或者 js 类库https://chrome.google.com/webstore/detail/chrome-sniffer-pl
      • 算法机试题 李亚飞 java算法机试题
               在面试机试时，遇到一个算法题，当时没能写出来，最后是同学帮忙解决的。        这道题大致意思是：输入一个数，比如4,。这时会输出：           &n
      • 正确配置Linux系统ulimit值 字符串 ulimit
        在Linux下面部 署应用的时候，有时候会遇上Socket/File: Can’t open so many files的问题；这个值也会影响服务器的最大并发数，其实Linux是有文件句柄限制的，而且Linux默认不是很高，一般都是1024，生产服务器用 其实很容易就达到这个数量。下面说的是，如何通过正解配置来改正这个系统默认值。因为这个问题是我配置Nginx+php5时遇到了，所以我将这篇归纳进
      • hibernate调用返回游标的存储过程 Supanccy2013 javaDAOoracleHibernatejdbc
        注：原创作品，转载请注明出处。     上篇博文介绍的是hibernate调用返回单值的存储过程，本片博文说的是hibernate调用返回游标的存储过程。     此此扁博文的存储过程的功能相当于是jdbc调用select 的作用。 1，创建oracle中的包，并在该包中创建的游标类型。 ---创建oracle的程
      • Spring 4.2新特性-更简单的Application Event wiselyman application
        1.1 Application Event Spring 4.1的写法请参考10点睛Spring4.1-Application Event 请对比10点睛Spring4.1-Application Event 使用一个@EventListener取代了实现ApplicationListener接口,使耦合度降低; 1.2 示例 包依赖 <p

      按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

      首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

      版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.

      、	，一个单元格 table-caption：