前端笔记CSS

1怎样将添加和修改模态框写在同一个模态框

<div v-show="!user.id" class="form-group">
    <label  class="col-sm-2 control-label">密码</label>
    <div class="col-sm-10">
        <input v-model="user.password" class="form-control"  >
    </div>
</div>

用这样的思想可以把修改和添加写在同一个模态框内

通过是否显示属性，通过不同的字段确定标签是否显示。

2模板语法

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。

3 CSS属性选择器

为带有特定属性HTML元素设置样式

 标签带的特殊值

CSS [attribute] 选择器

[attribute] 选择器用于选取带有指定属性的元素。

下例选择所有带有 target 属性的 <a> 元素；

CSS [attribute="value"] 选择器

[attribute="value"] 选择器用于选取带有指定属性和值的元素。

下例选取所有带有 target="_blank" 属性的 <a> 元素：

实例

a[target="_blank"] { 
  background-color: yellow;
}

CSS [attribute~="value"] 选择器

CSS [attribute|="value"] 选择器值是完整的单词，或者是-前的单词

注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。

CSS [attribute^="value"] 选择器

提示：值不必是完整单词！

CSS [attribute$="value"] 选择器

提示：值不必是完整单词！

CSS [attribute*="value"] 选择器

 提示：值不必是完整单词！

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value]	[lang|=en]	选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^="https"]	选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]	选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]	a[href*="w3school"]	选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

 通过属性选择器，让表单等的布局变得多样化，色彩仿佛，让人有了更多发挥的空间，

4 CSS表单

CSS transition 属性为搜索输入框获得焦点时的宽度变化设置动画。

5 CSS计数器

CSS 计数器是由 CSS 保持的“变量”，其值可以通过 CSS 规则递增（以跟踪其使用次数）。

计数器使您可以根据内容在文档中的位置来调整其外观。

6 网站布局

CSS3高级教程

css圆角

boder-radius

属性	描述
border-radius	用于设置所有四个 border-*-*-radius 属性的简写属性。
border-top-left-radius	定义左上角边框的形状。
border-top-right-radius	定义右上角边框的形状。
border-bottom-right-radius	定义右下角边框的形状。
border-bottom-left-radius	定义左下角边框的形状。

边框图像

CSS背景

属性	描述
background	用于在一条声明中设置所有背景属性的简写属性。
background-clip	规定背景的绘制区域。
background-image	为一个元素指定一幅或多幅背景图像。
background-origin	规定背景图像的放置位置。
background-size	规定背景图像的大小。

CSS文字效果

CSS 文本效果属性

下表列出了 CSS 文本效果属性：

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。