css基础知识二

1、盒模型:

  实际宽度:外边距*2+内边距*2+边框*2+内容宽度(注意这点,可解决界面元素轻微浮动问题,如hover有边框,以前没的时候会有轻微浮动)

  作用:他规定了网页元素如何显示以及其相互关系

2、padding会撑大容器,而margin不会。

  这点巧用(自己总结的):① 能用margin的别用padding

              ② 网页中为一个元素添加一边的下划线时候用padding

              ③ 导航栏中,用<ul><li>写的时候,先调节<li>的padding:npx,再调节<ul>的margin,记得margin的值减去n

3、background-size : cover:扩大图像,使得背景图完全覆盖背景区域,知道碰到最后一个边缘停止

            contain:扩大背景图像,碰到第一个边缘就停止

4、背景的冷知识,设置scroll(随页面滚动而滚动)或fixed(不随页面滚动)

5、渐变:线性渐变:linear-gradient  属性值(to top,red 40%,blue 50%) 这里注意加上-webkit后不用加to了就

     径向渐变:radial-gradient 属性值(center,shape size,start-color,last-color)

        shape:circle或ellipse

        size:自行查阅吧,用的不多。

   重复渐变:repeating-linear-gradient

6、浏览器兼容: Firefox:-moz-

        Chrome,Safari:-webkit-

        Opera:-o-

7、首行文本缩进:text-indent:2em

8、溢出处理:   white-space:normal / nowrap(不换行)

      文本溢出:  text-overflow: clip(直接裁剪)  ellipsis 通过...来显示

          出现...的条件   ① white-space:nowrap  ② text-overflow:ellipsis ③ width: ④ overflow:hidden

      长单词换行(只对英文有效) word-wrap : break-word

      文本换行 word-break:break-all 破坏单词结构进行换行  keep-all:在半角状态下的空格进行换行

9、letter-spacing 设置文字间间距   word-spacing 设置英文单词之间的间距

10、border-collspse separate:分离边框(默认) colapse(合并边框,不会挤压)

11、表格文本对齐 :vertical-align : top / bottom /middle

12、浮动定位 float

    将元素排除在普通流之外,元素在网页是不占空间的

    浮动元素会放在包含框的左边或右边,但依然在包含框内

    浮动元素在浮动时。可以向左或向右移动,直到碰到包含框或其他浮动元素位置

  特点:

    浮动元素边缘不会超过父元素的边框

    浮动元素默认不会重叠

    浮动只能左右浮动,不能上下浮动

    所有元素设置为浮动元素的话,默认转换为块级元素

  注,

    子元素有浮动的话,记得给父元素加上overflow:hidden,意为拉子元素进入框中

    设置overf后才能用padding设置位置

    给父元素内所有子元素浮动后,不会撑开文本流。当给父元素内子元素绝对定位后会重叠

13、清除浮动 clear:left / right /both

    巧用:clear:both,消除两个div之间的间距

14、margin:0 auto;设置居中的前提是设置宽高

15、显示 display

      ① none 元素不显示,并不占空间

      ② block 使元素像块级元素一样去显示

      ③ inline 使元素像行内元素一样去显示

      ④ inline-block 行内块

16、visibility

      ① visible 默认值,可见

      ② hidden 元素不可见,但占空间

      ③ collapse 用在表格上,可删除行或列,不影响布局

17、透明度 opacity (注,尽量用raba去设置透明度,因为opacity会影响父级元素下面的子元素)

  IE中设置透明度 filter:alpha (opacity=value)

18、巧方法,不再父级元素上设置宽高度,而是设置子元素让其撑开

19、对齐,vertical-align:middle 针对行内元素img,可定义边上文字与当前元素的对齐方式 记得给img加上align="absmiddle"属性

20、光标 cursor

      pointer、crosshair 、wait、help、move、text

21、定位巧用:父类用相对定位,子类绝对定位(轮播图)

22、给父类元素加上相对定位后,子类元素会相对与父类元素

23、列表头前加图片:list-style-image:url();

24、设置列表的标识,list-style-position:outside(外部)inside(内部)

                                

                  

                  

时间: 2024-10-31 20:36:21

css基础知识二的相关文章

CSS基础知识---浮动,定位和盒模型

转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现在内容区域的周围,如果为元素添加背景,那么背景就会应用于由内容和内边距组成的区域.添加边框会在内边距的区域外边加一条线.在边框外边是外边距,外边距是透明的,一般用它来控制元素之间的间隔. 内边距,边框,和外边距是可选的,默认值为零.但是许多元素由用户代理样式表设置了外边距和内边距,我们可以将元素的m

(转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)

欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教

XHTML CSS基础知识

学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听不懂. 由于时间关系,本教程只讲解一些基础知识,让您从原来的表格布局跨入到web标准(div+css)布局,会使用web标准制作出常见的页面,这也达到了本教程的目的. 本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念.因为概念这些东西很难说明白,或者说明白你也不一定

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

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

经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> <body>...</body> </html> html是根标签 head定义文档头部,包含: title, script, style, link, meta body是网页主要内容,包含:h1,h2-h6, p, a, img 2. 认识head标签: <head

HTML/CSS基础教程 二

表 表是十分有用的,用它存储表状的数据更易于阅读.当你想用行列来显示信息时---你猜到了,<table>标签正是你需要的,有许多和表有关的标签,它们都以<table>开始. 表就是将一组数据用行列的形式排列,我们用<tr>标签创建一个表行(table row),<td>标签表示表数据(table date) <!DOCTYPE html> <html> <head> <title>Table Time</

java学习篇之---css基础知识(一)

css基础知识(一) 1.css样式: 加载css样式有以下四种: 1).外部样式 2).内部样式 3).行内样式 4).导入样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 这种形式是把css单独写到一个css文件内,然后在源代码中以link方式链接.它的好处是不但本页可以调用,其它页面也可以调用,是最常用的一种形式. <style> h2 {

CSS基础知识梳理

CSS基础知识: 1.CSS层叠样式表(Cascading Style Sheets):解决内容与表现分离的问题. 2. 层叠次序: (1)浏览器缺省设置: (2)外部样式表: (3)内部样式表(位于 <head> 标签内部): (4)内联样式(在 HTML 元素内部): 即,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值). 3.CSS语法:CSS 规则由