css_10_其他样式

CN_山居

于 2021-12-09 08:56:16 发布

阅读量239

点赞数

分类专栏： CSS 文章标签：其他 css css3

本文链接：https://blog.youkuaiyun.com/Kemperorster/article/details/121766818

版权

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用CSS去除input标签选中时的默认边框，并实现文本超出显示省略号的效果。同时，通过box-sizing属性，将边框和内边距包含在元素的总尺寸中，避免布局混乱。这些技巧对于前端开发者优化网页交互体验十分有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其他样式

关于input标签选中边框

input{
    border:none；
    
    /* 可以去掉元素选中默认出现的边框 */    
    outline:none;
}

显示省略号

p{
    width：100px；
    border：1px solid black;
    
    /* 超出显示省略号 */
    text-overflow:ellipsis;
    
    /* 不换行 */
    white-space:nowrap;
    
    /* 超出隐藏 */
    overflow:hidden；
}

box-sizing属性

div{
	width:200px;
	height:200px;
    background:red;
    /* 把设置的边框、内边距全都计算到设置的宽高属性中 */
    box-sizing:border-box;
    /* 默认属性，设置的宽高只计算 里面的内容 占据的宽高 */
    /* box-sizing:content-box; */
    
    
    
    padding:10px;
    border: 50px solid black;
}