在本文中，您将会了解到关于css--技巧整理的新资讯，同时我们还将为您解释1-13-animagi的相关在本文中，我们将带你探索css--技巧整理的奥秘，分析1-13-animagi的特点，并给出一些

在本文中，您将会了解到关于css--技巧整理的新资讯，同时我们还将为您解释1-13 - animagi的相关在本文中，我们将带你探索css--技巧整理的奥秘，分析1-13 - animagi的特点，并给出一些关于) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法、、 不起作用、Angular:

添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css的实用技巧。
本文目录一览：
• css--技巧整理（1-13） - animagi（css animal）
• ) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法
• ">
• 不起作用"> 不起作用
• Angular:
  添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css



css--技巧整理（1-13） - animagi（css animal）

 （更新中）

1、取消浏览器form中默认样式

　　a、chrome下input和textarea的聚焦边框

　　　　input,button,select,textarea{outline:none}

　  b、取消chrome下textarea可拖动放大

　　　　textarea{resize:none}

立即学习“前端免费学习笔记（深入）”；

　　c、解决chrome下input，textarea自动填充后有黄色背景 

　　　　input:-webkit-autofill , textarea:-webkit-autofill , select:-webkit-autofill{

　　　　　　-webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
　　　  }


2、css高度自适应：

　　.demo:after{content:".";display:block;height:0;overflow:hidden;clear:both;visibility:visible;}

3、低版本ie浏览器box-shadow

<span>.box {
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari 和 Chrome */
    border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */

    -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
    -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */

    box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于''box''类,只黑色阴影有效 */
}</span>

登录后复制

 .htc文件是个脚本文件，可以用来描述web行为，ie-css3.htc让IE浏览器支持CSS3的一些属性，其工作原理是用VML（将图形数据矢量化的标记语言）。

使用时要注意：

1. 当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
2. z-index值一定要比周围元素的要高

相关博客：http://www.zhangxinxu.com/wordpress/?p=783

另外：

　　behavior： | url(#objID) | url(#default#behaviorName)

Behavior(行为)是IE5.0推出的东西，它的功能非常强大，结合样式表，可以给任何HTML对象增加行为（新的属性、方法、事件）

url ( url )	:	使用绝对或相对 url 地址指定DHTML行为组件（.htc）
url ( #objID )	:	使用二进制实现(作为 ActiveX?/STRONG> 控件)的行为。此处的 #objID 为 object 对象的id 属性值
url ( #default#behaviorName )	:	IE的默认行为。由行为的名称标识( #behaviorName )指定

 

 

 

 

4、background-size兼容

　　a、参数

background-size：contain; // 缩小图片来适应元素的尺寸（保持像素的长宽比）；

background-size ：cover; // 扩展图片来填满元素（保持像素的长宽比）；

background-size ：100px 100px; // 调整图片到指定大小；

background-size ：50% 100%; // 调整图片到指定大小，百分比相对于包含元素的尺寸。

　　b、浏览器兼容：

IE 和遨游不支持；

Firefox 添加私有属性 -moz-background-size 支持；

Safari 和 Chrome 添加私有属性 -webkit-background-size 支持；

Opera 不支持 background-size 属性，添加其私有属性 -o-background-size 也不支持。

　　c、IE兼容代码：

html,body{width: 100%;}
.main-warp{
　　width: 100%;
　　background:url(../../images/mall/list/bj.jpg) no-repeat;
　　background-size: 100% 100%;
　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=''../../images/mall/list/bj.jpg'', sizingMethod=''scale'');
}

5、css绝对定位元素在页面居中

　　注意：必须设定height和width值

方法1：

<span>div</span>{<span>
    height</span>:<span>10%</span>;<span>
    width</span>:<span>30%</span>;<span>
    position</span>:<span> absolute</span>;<span>
    margin</span>:<span> auto</span>;<span> 
    top</span>:<span> 0</span>;<span> left</span>:<span> 0</span>;<span> bottom</span>:<span> 0</span>;<span> right</span>:<span> 0</span>;
}

登录后复制

 

方法2：

<span>div</span>{<span>
    height</span>:<span>10rem</span>;<span>
    width</span>:<span>30rem</span>;<span>
    position</span>:<span> absolute</span>;<span>
    left</span>:<span>50%</span>;<span>
    margin-left</span>:<span>-15rem</span>;<span>
    top</span>:<span>50%</span>;<span>
    margin-top</span>:<span>-5rem</span>;
}

登录后复制

 

6、css 利用table-cell实现居中的方法

display:table;   此元素会作为块级表格来显示（类似

），表格前后带有换行符。    

display:table-cell;   此元素会作为一个表格单元格显示（类似

和

） 7、定位后遮挡 绝对、相对定位的元素，其父元素（包含块）为position:absolute;也可以，不是必须用position:relative。 如果包含块有宽、高限制，子元素超出部分会被遮挡住。包含块的父元素宽、高限制不影响。       相关连接：http://www.zhihu.com/question/19926700   8、-webkit-font-smoothing 　　设置字体的抗锯齿或者说光滑度的属性。 none                                     ------ 对低像素的文本比较好  subpixel-antialiased                ------默认值  antialiased                             ------抗锯齿   9、margin/padding-top/bottom 的百分比是按照 width 计算的 　　看到2种说法，比较赞同第一种。 　　（1）因为要构建在纵横两个方向上相同的 margin/padding。如果两个百分比的相对方式不同，那用百分比就无法得到垂直和水平一致的留白。CSS 的基本模型是着重于“排版”的需求，因此水平和垂直方向其实并不是同等权重的，更精确的说，是文字书写方向决定的。常见的横排文字时，我们排版的出发点是水平宽度一定，而垂直方向上是可以无限延展的。竖排文字则相反。所以在竖排文字时，margin/padding-* 其实就都按照 height 而不是 width 计算了。 　　（2）如果用height来计算，百分比*容器高度=padding-top（假设这是A等式），但是容器的高度=内容高度+padding-top（B等式），如果A成立能得到 padding-top， padding-top又影响到B等式，但B等式又是A等式的条件，是死循环。   10、 中图片位置偏下         因为img是inline-block，图片高度小于字体高度时，li行高受字体大小影响，图片按照字体高度的下边界对齐。 2种解决方法：1、li设置font-size:0; 　　　　　　  2、图片设置display:block;   11、火狐中设置height:100%; 时，padding-bottom无效 兼容方法： 不设置padding-bottom，用after伪类的高度代替 {<span> content</span>:<span>"."</span>;<span> height</span>:<span>0.9rem</span>;<span> visibility</span>:<span>hidden</span>;<span> display</span>:<span>block</span>;<span> clear</span>:<span>both</span>;<span> font-size</span>:<span> 0</span>; } 登录后复制   12、设置overflow:scroll;后，子元素浮动失效 　　因为受滚动条的宽度影响，如果一定要有滚动效果，就给父元素外再套一个div，设置宽度后，overflow:hidden; 然后把父元素的宽增加大概20px   13、连续点击时，防止背景变蓝 <span>body</span>{<span> -moz-user-select</span>:<span> none</span>; <span>/*</span><span>火狐</span><span>*/</span><span> -webkit-user-select</span>:<span> none</span>; <span>/*</span><span>webkit浏览器</span><span>*/</span><span> -ms-user-select</span>:<span> none</span>; <span>/*</span><span>IE10</span><span>*/</span><span> user-select</span>:<span> none</span>; } 登录后复制



) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法

Visual Studio Code does not support 4 级范围语法呢。此外，MDN 表示目前只有 Firefox 支持该语法。如果您需要跨浏览器支持，您现在需要坚持使用原始的 max-width 语法：

@media (max-width: 768px) {
    h1 {
        font-size: 3em;
        color: mediumvioletred;
    }
    nav a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: mediumaquamarine;
    }
}

否则，你所拥有的是正确的。

" alt="">

">

OSC 请你来轰趴啦！1028 苏州源创会，一起寻宝 AI 时代

css 样式   引入  href="css/layout.css?id=7" 是什么意思？

不起作用" alt=" 不起作用">

不起作用"> 不起作用

如何解决<link rel="stylesheet" type="text/css" href="{% static ''css/style.css'' %}"> 不起作用

我在 vs-code 上将 css 链接到 html。 center-aliend 在这里不起作用。有没有人知道哪个部分有问题？ 我想设置文本“Hello Static!!”到浏览器的中心。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="{% static ''css/style.css'' %}">
    <title>Static Practice</title>
</head>
<body>
    <div>Hello Static!!</div>
</body>
</html>

body {
    text-align: center;
}

# Static files (CSS,JavaScript,Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = ''/static/''
STATICFILES_Dirs = [
    BASE_DIR / ''static''
]





Angular:

添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

如何解决Angular: <ol> 添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css

我正在 angular 中创建富文本编辑器，当我执行 document.execCommand(''insertOrderedList'') 时，我得到 <ol> 项，它不受我组件的 css 的影响，只有 styles.css 中的 css（主 css 文件在项目的根目录）影响我使用 document.execCommand 添加的项目。 是否有可能改变这种行为？

解决方法

当然。它的名字是view encapsulation。将其更改为 ViewEncapsulation.none 会产生所需的行为。

@Component({
  ...
  encapsulation: ViewEncapsulation.none
})

我们今天的关于css--技巧整理和1-13 - animagi的分享已经告一段落，感谢您的关注，如果您想了解更多关于) 预期 css(css-rparentexpected)" 用于@media 查询中的第 4 级 css 语法、、 不起作用、Angular:

添加的 document.execCommand 只看到 style.css 中的 css 规则而不是组件的 css的相关信息，请在本站查询。

本文标签：

• CSS
• Animation
• Animagi
• Web_Development