body{hei"/> body{hei">
search

Home  >  Article  >  Web Front-end  >  Summary of some knowledge points about HTML and CSS

Summary of some knowledge points about HTML and CSS

零下一度
零下一度Original
2017-06-25 09:39:551304browse

A complete page consists of three parts:

  • html: Hypertext Markup Language

    • Through semantic tags, Build the page "structure"

  • css: Cascading style sheet

    • is responsible for the page "style" and beautify the page

  • js: lightweight scripting language; interaction refers to two places (behavior)

    • The front-end itself The "animation effect" written on the page

    • "data interaction" in the front and backend
      The combination of structure, style, and behavior

How to introduce css

  1. Embedded; (embedded)

    <style>
    body{
        height:100%;
        background-color: red;
    }
</style>

  2. Inline style

    <body style="height:100%; background: #333333">

  3. External link type (real development, all external links are used)

    <link rel="stylesheet" href="style.css?1.1.11"/>

css priority

  • Inline>Inline>External link

css common properties and styles

  • When the setting is wrong, in the chrome control There will be a yellow exclamation mark as a prompt

  • color: color value; there are three ways to express color
    Shortcut key: c+tab

    • In English: red

    • rgb(255,0,0)

    • #fff

  • ##font-size: font size

    • Shortcut key: fsz30->font -size:30px


      font:400 14px/28px "宋体";

    ##background: Add background

  • Picture default Is horizontal repetition and vertical repetition

    • Position:

      • Horizontal position: left center right

      • Vertical position: top center bottom

    Comprehensive writing method:
  • background: url("images/bg2.png") no-repeat left center red;

      • background-image:url("image address")

      • background-repeat:no-repeat ; /repeat-x;/repeat-y

      • background-position:0 0

    • ##background-color:red

      • Whether the font is slanted

    • font-style: italic slant/normal normal

      • Underline and strikethrough

  • text-decoration: line-through; strikethrough

  • ##text-decoration: none; remove underline

  • text-decoration: underline;Add underline

  • Selector in css:

1. Label selector: div p ul li dt dd em i u del strong b input label from table

  • ##Disadvantages: Only common operations can be performed, and individual operations cannot be performed

    • 2.class selector

  • 3.id:

  • .class name
    • , the same page can have countless same class names

    • #id name

      , the same page can only have one ID name; (ID names cannot be repeated)

    • In the real development process, class is used to set styles, and id is used to obtain elements

      <div class="div1 div2 div3" id="div1"></div>

    • 4. Descendant selector: div p (select all p elements of descendants under the div container)

  • 5. Child selector: div > p (select the son under the div container); compatible with IE7+

  • 6. Intersection selector: div.div1

  • 7. Union selector: div, p

  • 8. Wildcard *: represents all elements

  • 9. Order selector: compatible with IE8+

  • div > p:first-child

      • ##div > p:last-child

    • 10. The next sibling selector ul li+li{} is compatible with IE7+

      • ##commonly used browsers for development

  • chrome

IE7~11

  • firefox

  • CSS inheritance and cascading

  • All attributes starting with font can be inherited; line-height

color can be inherited

  • Those starting with text can also be inherited, such as text-align

  • css weight

  • !important weight is infinite; (use less, the better)

The weight of id is greater than the weight of class

  • css box model

  • css box model consists of 5 parts ：

    Content width and height+padding+border+margin

      • Centering of single line text: height = line- height

      • Centering, padding and line-height of multi-line text

  • padding:

    • padding是内边距

    • padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色

    • padding是复合值
      padding:30px; ->pl30; pt30;pr30;pb30
      padding:20px 30px; ->上下为20px 左右30px
      padding:10px 20px 30px; -> 上10px 左右20px 下30px
      padding:10px 20px 30px 10px; 上 右 下 左

      如果现设置padding:30px
      再设置padding-left:10px
      请问最后的值各是多少？
      左10px; 其他都是30px

  • margin：外边框

  • border:

    • border:1px solid #000;

    • border-width

    • border-style：solid（实体）,dashed（虚线）,dotted（点）

    • border-color

行内元素和块级元素

  • p标签虽然是文本标签，但是它可以当容器来使用，p标签内一定不能放div; p段落也是块元素，他独占一行

  • 文本元素：p span a i em u b strong img

  • 容器级：div li dt dd h级（不建议）

  • 除了p，所有的文本元素，都是行内元素

  • 所有容器级别的元素，都是块元素

  • 块和行内元素的相互转化

    • display：inline; //行内

    • display:inline-block;//行内块

    • display：block; //块

  • 关于定位：大部分情况，建议的是:父相子绝（父亲：相对定位，儿子：绝对定位）

  • 关于脱离文档流的方法

  • 浮动 float:left; float:right;

  • 绝对定位 position:absolute;

  • 固定定位 position:fixed;

  • 重点：1）父相子绝 2）行内元素一点脱离文档流，就可以设置宽高了；

  • 注意：行内元素，一旦脱离文档流，虽然能设置宽高，但是，如果不设置宽的话，会默认跟内容一样宽；而块级元素，如果不设置宽度的话，默认跟父级一样块，没有父级的话，默认跟屏幕一样宽

  • 清除浮动

    • 固定高度height:xxxpx;
      缺点：如果作为产品列表的容器展示，我们无法知道容器的具体高度

    • overflow:hidden

    • clear:both
      缺点：可以解决浮动引起的文档流错乱问题，但是上面浮动元素的父容器该没有高度还没有高度

    • 伪类清除浮动

      ul::after{
display: block;
height:0;
content: '';
clear: both;
}

  1. 溢出隐藏

  2. 清除浮动
    缺点：如果父容器比较小，子容器比较大；父容器如果通过overflow:hidden来清除浮动的话，子容器就看不到了

  • 透明度处理

    • rgba() 背景透明，文字不透明；

    • opacity:0 背景透明，文字也透明；

      opacity:0.1;/*不兼容IE7浏览器*/
filter:alpha(opacity=10);

    最基本的开发，首先必须创建的项目结构

    • images文件夹：放切好的图片

    • css文件夹：放置css文件：index.css

    • index.html文件

    关于继承

    • 宽度继承：如果没有父级，块元素的宽度默认跟可视区一样宽；如果有父级的情况下，默认跟父级宽度一样宽(宽度可以继承，但高度无法继承;)

    • font可以继承

    • color可以继承：当遇到a标签的时候， color无效；

    • line-height可以继承

    当文本超度固定宽度的处理方法：

    • 单行文本出超固定宽度出现省略号的写法：

      white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis

    • 英文不折行的问题处理： word-wrap:break-word;

    • 出现滚动条的写法overflow-y:scroll;

    区分伪类和伪元素

    • 伪元素：用:和::都可以，现在建议用::

    • 伪类：给当前选择器添加动效，只能用:

    The above is the detailed content of Summary of some knowledge points about HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!

    Statement：
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article：Detailed explanation of how to vertically center a floating elementNext article：Detailed explanation of how to vertically center a floating element

    Related articles

    See more