当前位置 : 首页 » 文章分类 :  开发  »  CSS-基础

CSS-基础

css笔记

其他

CSS 实现聊天对话框一左一右排列

关键点：
1、默认是靠左排列的，所以接收消息 div 不用特别设置，增加一个 margin-right: 20%; 限制对话框宽度，右侧留白 20%。
2、发送的消息 div 需要靠右，通过 margin-left:auto; 实现，margin 不设置的话默认是0（就是紧挨着），设置为 auto 会占据全部剩余空间。所以 margin-left 设为 auto 就实现了左外边框将左侧剩余空间全部占满，也就靠右显示了。
3、height 设为 auto，可以实现 div 高度根据内部文字多少自动撑开。
4、width 设为 fit-content 可实现每个对话框宽度也有内部文字自动撑开。

<style type="text/css">
  .div-received-single-msg {
    /* 接收到的消息靠左显示，右margin留出20% */
    margin-right: 20%; 
    height:auto;
    width:fit-content;
    margin-top: 3px;
    margin-left: 2px;
    text-align: left;
    border:1px solid #000;
    border-radius: 5px;
  }

  .div-send-single-msg {
    /* 发送的消息靠右显示，margin-left设为auto，自动占据剩余全部宽度*/
    margin-left:auto;
    height:auto;
    width:fit-content;
    margin-top: 3px;
    margin-right: 2px;
    text-align: right;
    border:1px solid #000;
    border-radius: 5px;
  }
</style>

iframe 自适应宽高

<div class="div-iframe">
  <iframe src="http://grafana.masikkk.com/d/xfpJB9FGz/node-exporter-dashboard-en-20201010-starsl-cn?orgId=1&refresh=30s&theme=light&kiosk" 
  frameborder="0" class="iframe-grafana" >    
  </iframe>
</div>

<style type="text/css">
  .div-iframe {
    position: relative; 
    width: 100%; 
    padding-top: calc(100% * 720 / 1280); 
    border: 1px rgb(77, 197, 240) solid;
  }
  .iframe-grafana {
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0;
  }
</style>

优雅的实现 iframe 高宽度自适应
https://youwu.today/skill/web/how-to-make-the-iframe-responsive/

css隐藏元素

visibility:hidden

visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none

display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

aria-hidden

现代的辅助技术能够识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了避免 屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden="true" 属性。

换行

word-wrap:break-word;自动换行

自动换行
p { word-wrap:break-word; }

word-break:break-all;强制换行

强制英文单词断行
p { word-break:break-all; }

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

white-space:nowrap强制不换行

强制不换行
p { white-space:nowrap; }

page-break-after 强制分页

page-break-after 用于在指定元素后面插入分页符。
在想要分页的地方插入一个指定了强制分页的 div 即可。

<div style="page-break-after: always;"></div>

border-radius 圆角边框

border-radius 用于向 div 元素添加圆角边框
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

border-radius:2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

CSS首字母大写text-transform

有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写。这时候我们就需要text-transform属性了。

/*首字母大写*/
.a {text-transform:capitalize;}
/*全都是大写*/
.b {text-transform:uppercase;}
/*全都是小写*/
.c {text-transform:lowercase;}

float属性

定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" alt="提示语"><br/>Markdown Logo</div>
<div style="float:left;text-align:center;"><img src="https://www.zybuluo.com/static/img/logo.png" alt="提示语"><br/>Markdown Logo</div>
<div style="clear:both;"></div>
提示语
Markdown Logo
提示语
Markdown Logo
**使用完float:left后必须clear:both来清楚float`
`，否则后续的内容还会继续浮动到前一行**

CSS float 属性
http://www.w3school.com.cn/cssref/pr_class_float.asp

DIV设置浮动float以后下一个DIV要换行的方法
http://www.cnblogs.com/mq0036/p/4604443.html

@media 媒体查询

媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。
如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。

使用方式：

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

媒体类型

  1. all 所有媒体
  2. braille 盲文触觉设备
  3. embossed 盲文打印机
  4. print 手持设备
  5. projection 打印预览
  6. screen 彩屏设备
  7. speech ‘听觉’类似的媒体类型
  8. tty 不适用像素的设备
  9. tv 电视

1、仅在可视区域宽度不小于700像素并在横屏时有效：

@media (min-width: 700px) and (orientation: landscape) {
}

2、仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效：

@media tv and (min-width: 700px) and (orientation: landscape) {
}

3、最小宽度为700像素或是横屏的手持设备上：

@media (min-width: 700px), handheld and (orientation: landscape) {
}

媒体查询中使用逗号分隔效果等同于or逻辑操作符

CSS媒体查询
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

如何使用CSS样式

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，从1到4优先级逐渐提高，内联样式拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

CSS基础语法

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明，每个声明的格式为：属性名:属性值。
语法：selector {property: value; ...; property: value; }
使用花括号来包围声明，每条声明以分号”;”结尾。
例如：
h1 {color:red; font-size:14px;}
上面代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

错误声明会被自动忽略

如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。
举个不正确的例子：

p {
    background-color: red
    font-family: 黑体;
    wordsize: 20px;
    float: left;
}

上面的例子第一条声明漏掉了分号，以上声明块会被解析为：

p {
    background-color: red font-family: 黑体;
    wordsize: 20px;
    float: left;
}

“red font-family: 黑体” 整个会被解析为background-color的属性值，这当然不是一个合法的属性值，该条声明将会被忽略掉。另外第二条声明使用了不正确的属性名wordsize，该条声明也将会忽略掉，结果只会正确处理第三条声明，等价于：

p {float: left;}

值为多个词要加引号

如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}

多重声明用分号分隔

如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：
p {text-align:center; color:red;}
你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

颜色值的不同写法

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

上一篇 2017年第二季度运动记录

下一篇 Java-反射

阅读
评论
3.2k字
阅读预计12分钟
创建日期 2017-03-25
修改日期 2023-09-16
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲