1、权重问题

内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称)

内联样式表 > 内部样式表、外部样式表

内部样式表、外部样式表的权重与书写顺序有关,后书写的权重高

注:虽然后书写的权重高,但是属性依旧被执行,只是相同属性会被覆盖,不同属性仍然显示

      !important权重最高
      开发者样式 > 读者样式 > 浏览器样式

     !!!当出现权重的时候就会出现层叠性

2、用css画三角

a.将盒子的宽高设为0px;

b.添加边框border;

c.为边框设置颜色border-color: ,不需要显示的边设置为透明色transparent。

3、文本溢出时以省略号显示

a.文本设置不换行 white-space:nowrap;

b.溢出文本隐藏处理  overflow:hidden;

c.溢出文本以省略号显示  text-overflow:ellipsis;

d.前提条件:存放文本的元素必须设有宽度;只能用在单行文本。

4、关于图片(浏览器解析其属性为inline)可以添加宽高的解答

img为置换元素(通过标签或者属性来改变元素在页面中的显示状态),且置换元素在浏览器解析的过程中生成一个框。

非置换元素:浏览器中大多数元素为非置换元素,将内容直接展示给浏览器。

5、大图在小盒子里居中显示

a.为父元素添加定位   position:relative;  子元素添加定位  position:absolute;

b.子元素向右移动父元素的一半   left:50%;

c.子元素向左移动自身的一半   margin-left:-宽度一半;

6、图片整合(精灵图 css sprites)

a.整合规则:背景图必须为透明 (png/gif);

根据实际应用场景,小图标之间留出足够的间距;

尽量上下排列;

如果存在左右排列的小图标,li列表符号的背景图放在图片的最右侧。

b.本质:控制背景图的位置   background-position:

c.优点:减少服务器请求次数;减小图片质量

7、高度塌陷问题

a.出现情况:当子元素有浮动,父元素没有设置高度或者设置了最小高度时,会出现高度塌陷问题。

b.解决办法:

法一:谁塌陷就给谁添加属性  overflow:hidden;

原理:overflow:hidden;出发了BFC,BFC规定计算BFC高度时,浮动元素也参与计算。

优点:代码量少;缺点:会隐藏定位到父元素外部的内容。

法二:在浮动元素下方添加一个空标签,并为空标签添加属性  clear:both;

原理:both会忽略以上浮动元素预留出来的空间。

优点:代码量少;缺点:产生不必要的元素,造成代码冗余。

法三:万能清除法(闭合浮动)谁塌陷给谁添加    :after{content:" ";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

原理:visibility:hidden;对元素隐藏但仍留有空间。

优点:解决了以上两种方法的缺点;缺点:代码量相对来说有点多。

8、浏览器bug以及解决办法

a.当图片添加了a标签后,在IE浏览器上会出现边框

css hack:给img添加border:0;   或者   border:0 none;

b.在div中插入图片,图片会将div下方撑大大约3px

css hack 1:div标签与img标签写同一行;

css hack 2 :将img转为块状元素   display:block;

c.表单元素对齐方式不一致(不在同一水平线)

css hack :给表单元素添加浮动  float;

d.按钮大小不确定(边框问题)

css hack 1:只要按钮不出现在表单里都用a标签做;

css hack 2:为按钮标签添加一个父元素,并将样式添加在父元素上   eg:<span><input type="submit"></span>

css hack 3:如果按钮是一张图片,切图放在a标签里;

e.鼠标指针bug    cursor:hand;(只有IE识别)

css hack:cursor:pointer;

f.关于透明度的兼容

css hack:opacity:属性值 ;(取值范围为0-1)

filter:alpha(opacity=属性值);(取值范围为0-100)IE

opacity:子元素会随父元素一起透明          rgba:背景透明        transparent:文字透明

g:margin的bug

bug1:给子元素添加margin-top。父元素会一起下移

bug2:纵向margin值不叠加

h:IE6的bug

bug1:双倍浮向边界(浮向边)margin值会双倍显示

css hack:给浮动元素添加属性   display:inline;

bug2:默认高度  当盒子的高度小于16px时会保持16px显示(IE默认最小高度为16px,认为内部留有最小文字高度)

css hack 1:font-szie:0;

css hack 2:overflow:hidden;

i:两个浮动元素的宽 50%+50%>100%

css hack:给右侧元素添加属性   clear:right;

j:导航条内li和a的bug

css hack:给li和a都添加float

9、BFC (block formatting context    独立渲染区   只有Block-level box参与      概念上的东西,用来解决一些排版问题)

布局规则:a.内部box会一个接一个垂直排列;

b.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;

c.计算BFC高度时,浮动元素也参与计算;

d.BFC区域不会与float box重叠;

e.每个元素的margin box的左边, 与包含块border box的左边相接触;

f.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

触发条件:a.根元素html;

b.float不为none;

c.position为absolute或fixed;

d.display为inline-block / table-cell / table-caption / flex / inline-flew;

e.overflow不为visible。

作用:a.清除内部浮动;

b.防止margin值上下重叠(加上一个会触发BFC的属性);

c.自适应两栏布局

10、继承性

  不可继承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

  所有元素可继承:visibility和cursor
  内联元素可继承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
  块状元素可继承:text-indent和text-align
  列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
  表格元素可继承:border-collapse

学习html/css基础的重点笔记的更多相关文章

  1. 2019-9-9:渗透测试,基础学习,windows基础命令,笔记

    windows系统基础命令学习 1,命令提示符界面进入方法 方法一: 某分区按住shift,右键单击选择在此处打开windows powershell,进入之后输入cmd 方法二:标题栏输入 方法三: ...

  2. HTML+CSS基础(HTML篇)

    引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完不成一些功能的,本篇开始学习HTML,文章的主要内容是总结了慕课网中,HTML+CSS ...

  3. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  4. HTML&CSS基础学习笔记—创建列表

    创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...

  5. 学习笔记(一) HTML+CSS基础课程

    这个周把慕课网的<HTML+CSS基础课程>课程学完,内容都是非常非常基础的,不过还是学到了几个小知识点,记下来先. <a>超链接发送邮件 直接上把他的图片给挪过来了,我就不打 ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  8. Elasticsearch入门学习重点笔记

    原文:Elasticsearch入门学习重点笔记 必记知识点 Elasticsearch可以接近实时的搜索和存储大量数据.Elasticsearch是一个近实时的搜索平台.这意味着当你导入一个文档并把 ...

  9. 前端学习(九):CSS基础

    进击のpython ***** 前端学习--CSS基础 CSS的样式可以写在哪呢?其实CSS的样式插入式十分灵活的 按照插入的形势来看,可以分为三种情况 而接下来就对这三种情况进行简单的讨论 内嵌式 ...

随机推荐

  1. Spring MVC前后端数据交互总结

    控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...

  2. Shell - 简明Shell入门11 - 调用脚本(CallTheScript)

    示例脚本及注释 主脚本: CallTheScript.sh #!/bin/bash . ./11-subscript.sh # 调用其他脚本;注意点号"."和文件路径之间有一空格; ...

  3. flask_json数据入库Mongo

    首先我们先导入python内置的json库,用来将接送数据转换为python对象 import json #导入自定义的数据公共库 from db_tool import db #载入库之前先清空数据 ...

  4. 03-创建高可用 etcd 集群

    本文档记录自己的学习历程! 创建高可用 etcd 集群 kuberntes 系统使用 etcd 存储所有数据,本文档介绍部署一个三节点高可用 etcd 集群的步骤,这三个节点使用以下机器: 192.1 ...

  5. linux(乌班图)下执行pip没有问题,执行sudo pip报错的问题

    最近刚装好linux的虚拟机,在装一个套件时提示权限不足,于是添加上了 sudo 命令,结果直接报以下错误, Traceback (most recent call last): File " ...

  6. POJ 2538

    #include<string> //#include #include<stdio.h> #include<iostream> using namespace s ...

  7. Linux在终端和控制台下复制粘贴命令快捷键

    1.在终端下: (1)复制命令:Ctrl + Shift + C 组合键. (2)粘贴命令:Ctrl + Shift + V 组合键. 2.在控制台下:(即vi编辑过程中) (1)复制命令:Ctrl ...

  8. Linux下安装Nginx详细图解教程 (nginx-1.2.6)

    什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...

  9. 计数排序/Counting Sort

    计数排序的算法思想: 对于每一个元素x,只要确定了元素x有多少个比它小的元素,那么就可以知道其最终的位置. 记输入数组为A[n],存放最后排序输出的数组为B[n],提供临时存储空间的中间数组记为C[k ...

  10. Java堆外内存之突破JVM枷锁

    对于有Java开发经验的朋友都知道,Java中不需要手动的申请和释放内存,JVM会自动进行垃圾回收:而使用的内存是由JVM控制的. 那么,什么时机会进行垃圾回收,如何避免过度频繁的垃圾回收?如果JVM ...