首页 / HTML / HTML和CSS的一些知识点的汇总

HTML和CSS的一些知识点的汇总

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了HTML和CSS的一些知识点的汇总，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4571字，纯文字阅读大概需要7分钟。

内容图文

一个完整的页面由三部分构成：

  • html：超文本标记语言

    • 通过语义化标签，搭建页面"结构"

  • css:层叠样式表

    • 负责页面"样式"，美化页面的

  • js:轻量级的脚本语言；交互指的是两个地方（行为）

    • 前端自己在页面上写的"动效"

    • 前后台的"数据交互"
      结构，样式，和行为三者相结合

css的引入方式

  1. 嵌入式；(内嵌式)

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

  2. 行内样式

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

  3. 外链式（真正的开发，用的都是外链）

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

css的优先级

  • 行内>内嵌>外链

css常见属性和样式

  • 当设置错误的时候，在chrome的控制台，会有黄色的叹号，进行提示

  • color：颜色值； 颜色有三种表示方法
    快捷键：c+tab

    • 用英文：red

    • rgb(255,0,0)

    • #fff

  • font-size:字体大小

    • 快捷键：fsz30->font-size:30px
      font:400 14px/28px "宋体";

  • background:添加背景
    图片默认是横向重复和纵向重复

  • 位置：

    • 横向位置：left center right

    • 纵向位置：top center bottom

  • 综合写法：background: url("images/bg2.png") no-repeat left center red;

    • background-image:url("图片地址")

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

    • background-position:0 0

    • background-color:red

  • 字体是否倾斜

    • font-style:italic 倾斜／ normal 正常

  • 下划线和删除线

  • text-decoration: line-through; 删除线

  • text-decoration: none; 去除下划线

  • text-decoration: underline;添加下划线

css中的选择器：

  • 1.标签选择器：div p ul li dt dd em i u del strong b input label from table

    • 缺点：只能进行共性的操作，无法个性操作

  • 2.class选择器

  • 3.id：

    • .class名,同一个页面能有无数个相同的class名

    • #id名，同一个页面只能有一个ID名；（ID名是不能重复的）

    • 在真正的开发过程中，class是用来设置样式的，id是用来获取元素

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

  • 4.后代选择器：div p(把div容器下，子子孙孙的p元素都选择上了)

  • 5.子选择器：div > p(选择div容器下的儿子)；兼容IE7+

  • 6.交集选择器: div.div1

  • 7.并集选择器：div,p

  • 8.通配符*：代表所有的元素

  • 9.序选择器：兼容IE8+

    • div > p:first-child

    • div > p:last-child

  • 10.下一个兄弟选择器 ul li+li{} 兼容IE7+

开发常用的浏览器

  • chrome

  • IE7~11

  • firefox

CSS的继承性和层叠性

  • 以font开头的属性都能够继承；line-height

  • color可以继承

  • text开头的也可以继承，比如text-align

css权重

  • !important权重无穷大；（少用为好）

  • id的权重大于class的权重

css盒子模型

  • css盒子模型由5部分：

    • 内容的宽高+padding+border+margin

  • 单行文本的居中：height = line-height

  • 多行文本的居中，padding和line-height

  • 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;

区分伪类和伪元素

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

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

以上就是HTML和CSS的一些知识点的汇总的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的HTML和CSS的一些知识点的汇总全部内容，希望文章能够帮你解决HTML和CSS的一些知识点的汇总所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/392919.html

来源：【匿名】